详解清除浮动的多种方法

我就是我 2022-05-30 05:59 232阅读 0赞

有段时间不写文章了, 以后正确不间断.

清除浮动, 这一篇文章足矣.

### 浮动让我们既爱又恨 ###

爱, 有了浮动我们可以更加方便的布局.

恨, 有了浮动他也带来了一些副作用, 特别是在IE67上(现在几乎已经销声匿迹了).

为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动.

清除浮动的方式有很多, 只要我们把浮动的原理搞明白了, 清除浮动也是非常好理解的.

正所谓万变不离其宗

--------------------

#### 有如下代码, 利用各种方法来消除浮动对 `div.content`的影响 ####

![1520302440352.png-atguiguImg][]

> #### *说明:* ####

*  因为`<li>`浮动, 所以`<ul>`没有高度, 所以`<div class="header">`也没有高度, 所以`<div="content">`就跑上去了.

--------------------

# 一. 方式1: 给浮动元素的父辈容器添加高度 #

很多时候为了高度的自适应性, 我们用子元素去撑起父元素的高度

但是如果子元素浮动之后, 就无法自动撑起父元素

导致, 父元素的高度为 `0`, 后面的元素就会长驱直入, 进驻到浮动元素的下方.真是悲哉.

解决这个问题最简单的办法就是 **手动给浮动元素的父辈元素添加高度**.

好使是好使, 但是不够灵活.

#### 给`<ul>`添加高度 ####

ul{ height: 40px; }

![1520302643859.png-atguiguImg][]

> #### *说明:* ####

*  给`<ul>`添加高度之后, `<div>`也有了高度, 然后后面的那个`<div>`就上不去了.相当于清除了浮动带来的影响
 *  缺点: 需要手动添加高度, 如何后面`<li>`的高度发生变化之后,还行再次修改`<ul>`的高度, 给后期的维护带来麻烦.
 *  优点: 简单粗暴直接有效
 *  这种方式, 尽量少用, 高度最好依赖子元素来撑开, 避免手动添加.

--------------------

# 二. 方式2: 使用清除属性`clear` #

`clerar`属性是`css`专门提供用来清除浮动的.

这个属性主要有三个值:

*  `left` 清除前面的左浮动元素带给我的影响
 *  `right`清除前面的右浮动元素带给我的影响
 *  `both` 同时清除前面的左右浮动元素带给我的影响. 一般情况下选择这个值比较方便.

.content{ clear : both};

> #### *说明:* ####

*  `clear`属性的含义是避免前面的浮动元素对自己的影响. 所以, 谁不想让别人影响自己, 就添加到谁身上.
 *  `clear`本质是, 浏览器在清理元素(使用`clear`属性的元素)的顶部添加了足够多的外边距, 使清理元素的顶部边缘垂直下降到浮动元素的下面.

--------------------

该方法虽好, 但是也有一些不足之处.

## 2.1 不足1: 浮动元素的父辈仍然没有高度 ##

因为`clear`对那些浮动的元素没有做任何的操作, 所以浮动元素的父辈仍然没有高度(如果你没有手动添加的话)

![1520304934801.png-atguiguImg][]

--------------------

## 2.2 不足2: 此时清除元素的`margin-top`失效 ##

前面说过`clear`的本质是在清理元素顶部添加足够多的外边距

所以这个时候我们再手动添加`margin-top`就失效了.

当然, 其他三个方向的`margin`还是有效的.

.content{ margin-top : 1000px; }

![87807730.jpg-atguiguImg][]

--------------------

# 三. 方法3:外墙元素隔离法 #

方法2清除浮动的最大问题是`div.content`不能设置`margin-top`无效.

*  想一想, 我们给后面的元素设置`margin-top`的目的是为了让后面的元素与前面的元素有一定的间距.
 *  现在`margin-top`既然无效了, 那我们能不能用一个单独的元素去填充我们本来想要的这段`margin-top`区域

于是就有了外墙隔离法.

![1520310315523.png-atguiguText][]

> #### *说明:* ####

*  完美隔开, 现在`div.content`完全和前面的浮动元素没有任何的隔离了.
 *  现在你可以给”墙”添加高度来增加他们的间距, 也可以给`div.content`添加`margin-top`. 一切皆有有你定.
 *  缺点: 虽然此方法用起来爽, 也没啥后遗症, 但是无端添加了一个本不该有的元素, y影响了我们的`HTML`结构.

于是就有了新的演变: ***内墙元素隔离法.***

--------------------

# 四. 方法4: 内墙元素隔离法 #

把元素放在外面, 影响`HTML`结构.

于是有人干脆把”隔离元素”放在内部.

![40396721.jpg-atguiguImg][]

> #### *说明:* ####

*  在第一个`<div>`内部添加一个清楚浮动的元素之后, 神奇的事情发生了, `div.header`竟然有自动有了高度.
 *  原因就是高度为`0`的`<div>`元素被固定在浮动元素的下面, `div.header`想要包含住这个新的`<div>`则必须自己有高度才行, 然后他就自己有了高度
 *  上帝说需要呼吸, 然后就有了空气.
 *  在相当长的一段时间内, 这里的内墙元素隔离法是各大公司使用的手段.

#### 直到有一天, 一个新的东西出现了…. ####

--------------------

# 五. 方法5: 内墙法的升级—使用伪元素 #

内墙法, 用着很爽.

但是对有洁癖的前端工程师来说, 也不是那么的舒服: 要添加一个元素去专门的清除浮动, 不爽.

`CSS3`的伪元素(`::`)拯救了他们.

今天先了解一个伪元素`::after`.其他待后期课程详细道来.

你只需要知道, 给一个元素添加一个`::after`则相当于给这个元素添加了子元素, 而且这个子元素会是他的最后一个儿子.

![42989155.jpg-atguiguImg][]

> #### *说明:* ####

*  利用伪元素完美无缺, perfect的解决了问题.
 *  一些浏览器不兼容伪元素(你知道我说的谁), 那你就把这个伪元素的两个冒号, 变成一个就行了,成为伪类,效果一样,兼容性还好.
 *  像当初病人吃了穆拉德的治疗心血管病的药物之后发现竟然有如此效果…., 然后就有了伟哥.
 *  当程序不经意间给浮动元素的容器使用了一个叫…的属性之后, 竟然发现…, 然后就有了第六种清除浮动的方法…

--------------------

# 方法6: 使用`over-flow`清除浮动 #

前面我们学习过`over-flow`的使用, 他的作用是处理当子元素溢出的时候的情况的.

现在我们把它用到浮动元素的父容器, 然后你发现竟然….

ul{ overflow: hidden; }

![1520318916294.png-atguiguText][]

> #### *说明:* ####

*  神奇的事情发生了, `<ul>`竟然有了高度, 那么自然就清除了浮动对其他元素的影响.
 *  why? 为什么会这么神奇? 我只能说这是浏览器的渲染机制引起, 是`overflow`的副作用.
 *  使用这个属性要小心, 在内容多的情况下有可能引起内容的截断. 注意下就好.

# 总结: #

清除浮动的核心理念就是想办法让浮动元素的父元素有高度, 事情就解决了.

[1520302440352.png-atguiguImg]: http://o7cqr8cfk.bkt.clouddn.com/markdown/1520302440352.png-atguiguImg
[1520302643859.png-atguiguImg]: http://o7cqr8cfk.bkt.clouddn.com/markdown/1520302643859.png-atguiguImg
[1520304934801.png-atguiguImg]: http://o7cqr8cfk.bkt.clouddn.com/markdown/1520304934801.png-atguiguImg
[87807730.jpg-atguiguImg]: http://o7cqr8cfk.bkt.clouddn.com/18-3-6/87807730.jpg-atguiguImg
[1520310315523.png-atguiguText]: http://o7cqr8cfk.bkt.clouddn.com/markdown/1520310315523.png-atguiguText
[40396721.jpg-atguiguImg]: http://o7cqr8cfk.bkt.clouddn.com/18-3-6/40396721.jpg-atguiguImg
[42989155.jpg-atguiguImg]: http://o7cqr8cfk.bkt.clouddn.com/18-3-6/42989155.jpg-atguiguImg
[1520318916294.png-atguiguText]: http://o7cqr8cfk.bkt.clouddn.com/markdown/1520318916294.png-atguiguText