CSS 浮动

一、浮动

1.1 传统网页布局的三种方式

网页布局的本质 – 用CSS来摆放盒子，把盒子摆放到相应位置

CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）:

• 普通流（标准流）
• 浮动
• 定位

1.2 标准流（普通流 / 文档流）

所谓标准流：就是标签按照规定好默认方式排列

1. 块级元素会独占一行，从上向下顺序排列
   • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
   • 常用元素：span、a、i、em

以上都是标准流的布局，我们前面学习的就是标准流，标准流是最基本的布局方式

1.3 清除浮动

1.3.1 为什么需要清除浮动

由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

1.3.2 清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：

选择器 {
	clear:属性值;
}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

清除浮动的策略是：闭合浮动

1.3.3 清除浮动的方法

1. 额外标签法也称为隔墙法，是W3C推荐的做法

   额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style="clear:both"></div>，或者其他标签（如<br/>等)

   • 优点：通俗易懂，书写方便
   • 缺点：添加许多无意义的标签，结构化较差

   注意：要求这个新的空标签必须是块级元素

2. 父级添加overflow属性

   可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll

   • 优点：代码简洁
   • 缺点：无法显示溢出的部分

3. 父级添加after伪元素

   :after 方式是额为标签法的升级版

   .clearfix:after {
   	content: "";
   	display: block;
   	height: 0;
   	clear: both;
   	visibility: hidden;
   }
   .clearfix {
   	*zoom: 1;
   }
   

   • 优点：没有增加标签，结构更简单
   • 缺点：照顾低版本浏览器

4. 父级添加`双伪元素

   也是给父元素添加额外标签

   .clearfix:before,.clearfix:after {
   	content: "";
   	display: table;
   }
   .clearfix:after {
   	clear: both;
   }
   .clearfix {
   	*zoom: 1;
   }
   

   • 优点：代码更简洁
   • 缺点：照顾低版本浏览器

---