一、开篇之言
要说web上实现两栏自适应布局的方法，一双手都数不过来。不知大家有没有细想过，为什么这些方法可以实现自适应布局呢？
本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局，还是针对传统布局。一些现代布局，如弹性盒子模型布局(Flexbox Layout)，格栅布局(Grid Layout)不在本文探讨之类。
有些人看了个标题，以及看了前面一两段，发现，都是我知道的概念嘛，什么流动性，什么BFC~~于是，就悻悻离开了。这就是我们常说的浮躁，保持一颗谦逊的心，细细阅读，你会发现，其中一定有你所没有关注过的地方，所谓三人行必有我师。没错，这句话就是写给你看的，同时也是自我内省与监督。
二、块状元素的流体特性与自适应布局
流体特性块状水平元素，如div元素(下同)，在默认情况下(非浮动、绝对定位等)，水平方向会自动填满外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，实际内容区域会响应变窄。
一图胜千言，一例胜千图。可参考下面例子，感受下div元素的流体特性：
图片宽度一直width:100%，依次点击3个按钮，结果随着margin, padding, border的出现，其可用宽度自动跟着减小，形成了自适应效果。就像放在容器中的水流一样，内容区域会随着margin, padding, border的出现自动填满剩余空间，这就是块状元素的流体特性。
流体特性下面，我们稍微做一个调整，div距离容器左侧margin 150像素，里面的图片同样100%自适应内容区域。HTML如下：
.flow-box { width: 500px; background-color: #eee; overflow:auto; resize:horizontal;}.flow-content { margin-left: 150px;}
查看更多关于CSS深入理解流体特性和BFC特性下多栏自适应布局_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112426