浮动布局

元信息

目标：掌握用 float 把块元素"漂"成多栏的古代主流布局法，重点理解全浮动导致父元素高度塌陷的原因与清除浮动的必要性
关键概念：浮动布局、float、高度塌陷、清除浮动、clearfix
关联阶段：cp2
常见误区：浮动布局可以不清除浮动（子元素全部漂浮后父元素高度为 0，后续元素布局混乱）；用固定高度恢复父元素高度（可行但丧失弹性，清除浮动才让最高的子元素决定高度）

什么是浮动布局?

利用浮动的特性,将多个块元素漂浮起来,形成横向排列的效果

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

浮动布局的清除问题

与利用float实现文字环绕图片有所不同,浮动布局通常会将各子元素全部漂浮起来,这会造成父元素完没有了内容,即高度为0.所以一定要记得清除浮动,不然后续元素的布局会出现混乱.

浮动清除后,父元素的高度将由漂浮子元素中最高的那个决定.

当然,也可以通过设置绝对高度的方式来恢复父元素的高度,但显然不够有弹性

复杂的浮动布局示例

复杂布局示例

重复利用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/

浮动布局 ​

元信息 ​

什么是浮动布局? ​

浮动布局的清除问题 ​

复杂的浮动布局示例 ​

参考 ​

深入阅读 ​

浮动布局

元信息

什么是浮动布局?

浮动布局的清除问题

复杂的浮动布局示例

参考

深入阅读