清除浮动

如果子元素浮动了，此时子元素不能撑开父元素。

目的：需要父元素有高度，从而不影响其他网页元素的布局

1.直接设置父元素高度

• 优点:简单粗暴，方便
• 缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块

2.额外标签法

方法：

• 在父元素内容最后添加一个块级元素
• 给添加的块级元素设置 clear:both

缺点:会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3.单伪元素清除法

基本写法：

 .clearfix::after{
 ​
 content:'';
 ​
 display:block
 ​
 clear:both
 ​
 }

补充写法：

 .clearfix::after{
 ​
 content:'';
 ​
 clear:both
 ​
 /*  补充代码：在网页中看不到伪元素  */
 ​
 height:0;
 ​
 visibility:hidden;
 ​
 }

优点:项目中使用，直接给标签加类即可清除浮动

4.双伪元素清除法

 .clearfix::before,
 ​
 .clearfix::after{
 ​
 content:'';
 ​
 display:table;
 ​
 }
 ​
 .clearfix::after{
 ​
 clear:both;
 ​
 }

优点：项目中使用，直接给标签加类即可清除浮动

5.给父元素设置overflow : hidden

(拓展补充)

BFC的介绍

➢ 块格式化上下文(Block Formatting Context):BFC

是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

➢ 创建BFC方法:

1. html标签是BFC盒子
2. 浮动元素是BFC盒子
3. 行内块元素是BFC盒子
4. overflow属性取值不为visible。如:auto、hidden…
5. ……

➢ BFC盒子常见特点:

1. BFC盒子会默认包裹住内部子元素(标准流、浮动)→ 应用:清除浮动
2. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用:解决margin的塌陷
3. ……