双容器布局
通过将内容放置到两个嵌套的容器中,然后给内层的容器设置外边距,让它在外层容器中居中。
是否还有必要学习浮动
Flexbox正在迅速取代浮动在页面布局中的地位。对新手开发人员而言,Flexbox的行为很直观,可预测性更好。
在现代浏览器中,不用浮动也能比过去更好地实现布局,甚至可以完全弃用浮动。但是如果要支持IE浏览器,现在放弃浮动还为时过早。只有IE10和IE11支持Flexbox,而且还有一些bug。如果不想碰到bug,或者需要支持旧版浏览器,浮动也许是更好的选择。
另外,如果你在支持旧代码库,它很可能用到了浮动布局。为了维护旧代码,也需要了解浮动的工作原理。还有一点,浮动布局通常不需要那么多的标记,新的布局方法则需要添加额外的容器元素。如果你写样式时不允许修改标记,浮动更能满足你的需求。
此外,要实现将图片移动到网页一侧,并且让文字围绕图片的效果,浮动仍然是唯一的方法。
BFC
第一种 浮动布局