浮动布局
什么是浮动布局?
Export
HTML
Result
利用浮动的特性,将多个块元素漂浮起来,形成横向排列的效果
浮动布局的清除问题
与利用float实现文字环绕图片有所不同,浮动布局通常会将各子元素全部漂浮起来,这会造成父元素完没有了内容,即高度为0.所以一定要记得清除浮动,不然后续元素的布局会出现混乱.
浮动清除后,父元素的高度将由漂浮子元素中最高的那个决定.
当然,也可以通过设置绝对高度的方式来恢复父元素的高度,但显然不够有弹性
复杂的浮动布局示例
重复利用float布局的技术,可以很容易实现复杂的嵌套布局
参考
- http://www.divcss5.com/rumen/r93.shtml
- https://www.cnblogs.com/smyhvae/p/7297736.html
- http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
- https://www.web-tinker.com/article/20013.html
- http://blog.csdn.net/kevinkristoffer/article/details/17972125
- http://www.w3cplus.com/css/how-floating-works.html
- http://www.zhangxinxu.com/wordpress/2010/01/css-float浮动的深入研究、详解及拓展一/
- http://www.zhangxinxu.com/wordpress/2010/01/css-float浮动的深入研究、详解及拓展二/
深入阅读
- 多栏布局 http://www.cnblogs.com/yiyezhai/p/3203490.html
- 详解 CSS 七种三栏布局技巧 https://juejin.im/entry/5895703b5c497d0056f247dd/
- 各种CSS布局技巧 http://www.imooc.com/article/2235
- CSS中的margin合并问题 https://blog.csdn.net/xjlinme/article/details/79535794
- CSS居中小谈 http://web.jobbole.com/88804/