CSS 笔记（八）：布局 —— 浮动

布局方式

布局方式是指浏览器如何对页面中的元素进行排版，具有标准流、浮动流和定位流的排版方式，浏览器默认的排版方式即为标准流（文档流/普通流）排版方式，分别为垂直排版（块级元素）和水平排版（行内元素/行内块级元素）

浮动流

浮动流是一种 “半脱离标准流” 的排版方式，仅有一种排版方式——水平排版，只能设置某个元素左对齐或者右对齐

属性

float

值

• left
• right

left 表示当前元素浮动后在父元素内部靠左，right 表示当前元素浮动后在父元素内部靠右

1. 浮动流中没有居中对齐，即没有 center，也不可以使用 margin: 0 auto;
2. 在浮动流中不区分块级元素/行内元素/行内块级元素，不论是哪一个类型，均可以水平排版
3. 在浮动流中无论是块级元素/行内元素/行内块级元素，均可以设置宽高

脱标

当一个元素浮动后，脱离了浏览器默认的标准流，此时，如果第一个元素浮动了，而第二个元素没有浮动，那么第一个元素会层叠第二个元素

排序规则

1. 相同方向上的浮动元素，先浮动的元素显示在前，后浮动的元素显示在后
2. 不同方向上的浮动元素，左浮动寻找左浮动，右浮动寻找右浮动
3. 浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置确定

浮动元素类似于浮动的气泡，在浮动流中占据一定的空间，向左浮动的元素靠左，向右浮动的元素靠右，浏览器会根据浮动的顺序将元素以一定方向依次排列，而不浮动的元素（块级元素）虽然在标准流中，但具有类似于挡板的作用，可以将在气泡限制在底部边框之下

贴靠现象

当父元素的宽度足以容纳所有浮动元素时，浮动元素以排序规则显示，但是，当父元素的宽度不足以容纳所有浮动元素时，超出范围的浮动元素会寻找合适的贴靠位置，直到可以容纳所有元素，如果贴靠到父元素边框之后任然不能容纳，则会层叠父元素

字围现象

当浮动元素层叠标准流元素时，如果标准流元素中存在文字，那么浮动元素不会层叠文字

---

什么时候使用标准流，什么时候使用浮动流

• 垂直方向使用标准流，水平方向使用浮动流

如何切分一个复杂的页面

• 从上至下布局
• 从外向内布局
• 水平方向可以先划分为一左一右，在每一部分中布局页面

---

高度问题

在标准流中，内容的高度可以撑起父元素的高度，而在浮动流中，浮动元素不能如此

清除浮动

方式一

设置父元素的高度为子元素（浮动）的高度

方式二

设置浮动元素的 clear 属性

属性

clear

值

• left
• right
• both
• none（默认）

left、right、both 分别表示当前的浮动元素不寻找左浮动元素，不寻找右浮动元素，不寻找左浮动和右浮动元素，值得注意的是，使用这种方式可能导致父元素的 margin-top 属性失效，如果为非浮动元素设置 clear 属性，那么不允许任何浮动元素在其上方层叠

方式三

隔墙法

1. 外墙法

在两个标签之间添加一个块级元素，设置 clear: both; 属性

• 此方法可以使第二个标签使用 margin-top 属性，不可以使第一个标签使用 margin-bottom 属性
• 可以通过设置 “外墙” 的高度增加两个标签之间的间距

2. 内墙法

在第一个标签的所有子元素之后添加一个块级元素，设置 clear: both; 属性

• 此方法可以使第二个标签使用 margin-top 属性，也可以使第一个标签使用 margin-bottom 属性
• 可以通过设置 “内墙” 的高度增加两个标签之间的间距

---

外墙法与内墙法的区别

内墙法可以撑起第一个标签的高度，而外墙法不可以撑起第一个标签的高度

---

方式四

利用伪元素选择器在第一个标签的所有子元素之后添加一个块级元素

选择器::after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
1
2
3
4
5
6
7

方式五

属性

overflow

值

• hidden

可以将超出标签范围的内容隐藏，可以清除浮动（在第一个标签中添加属性 overflow: hidden;），也可以防止嵌套关系标签中的内部标签在设置 margin-top 属性时产生的影响（在第一个标签中添加属性 overflow: hidden;）