清除浮动的方法

目录

清除浮动

2.1 清除浮动的方法 — ① 直接设置父元素高度

2.2 清除浮动的方法 — ② 额外标签法

2.3 清除浮动的方法 — ③ 单伪元素清除法

2.4 清除浮动的方法 — ④ 双伪元素清除法

 2.5 清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

---

清除浮动

➢ 含义： 清除浮动带来的影响

•

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

➢ 原因：

•

子元素浮动后脱标 → 不占位置

➢ 目的：

•

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

2.1 清除浮动的方法 — ① 直接设置父元素高度

特点：

•

优点：简单粗暴，方便

•

缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

2.2 清除浮动的方法 — ② 额外标签法

➢ 操作：

1. 在父元素内容的最后添加一个块级元素

2. 给添加的块级元素设置 clear:both

➢ 特点：

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

2.3 清除浮动的方法 — ③ 单伪元素清除法

2.4 清除浮动的方法 — ④ 双伪元素清除法

 

/*  .clearfix::before 作用: 解决外边距塌陷问题

外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置

 2.5 清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

➢ 操作：

1. 直接给父元素设置 overflow : hidden

➢ 特点：

•

优点：方便