详解清除浮动的多种方法

Posted 2022-12-06 做人要厚道2013

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了详解清除浮动的多种方法相关的知识，希望对你有一定的参考价值。

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

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

浮动让我们既爱又恨

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

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

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

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

正所谓万变不离其宗

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

<style>
*
    padding: 0;
    margin: 0;

ul
    list-style: none;/*去掉小圆点*/

.nav li
    width: 100px;
    height: 40px;
    float: left;
    border: 1px solid #000;

.content
    width: 500px;
    height: 300px;
    background-color: pink;

</style>
<div class="header">
    <ul class="nav">
        <li>导航 1</li>
        <li>导航 2</li>
        <li>导航 3</li>
    </ul>
</div>
<div class="content"></div>

说明:

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

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

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

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

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

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

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

给`<ul>`添加高度

ul height: 40px;

说明:

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

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

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

这个属性主要有三个值:

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

.contentclear : both;

说明:

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

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

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

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

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

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

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

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

.content margin-top : 1000px;

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

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

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

于是就有了外墙隔离法.

<style>
*
    padding: 0;
    margin: 0;

ul
    list-style: none;/*去掉小圆点*/

.nav li
    width: 100px;
    height: 40px;
    float: left;
    border: 1px solid #000;

.content
    width: 500px;
    height: 300px;
    background-color: pink;

.clear_b
    clear: both;

</style>
<div class="header">
    <ul class="nav">
        <li>导航 1</li>
        <li>导航 2</li>
        <li>导航 3</li>
    </ul>
</div>
<div class="clear_b"></div>
<div class="content"></div>

说明:

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

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

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

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

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

<div class="header">
    <ul class="nav">
        <li>导航 1</li>
        <li>导航 2</li>
        <li>导航 3</li>
    </ul>
    <div class="clear_b"></div>
</div>
<div class="content"></div>

说明:

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

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

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

内墙法, 用着很爽.

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

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

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

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

<style>
*
    padding: 0;
    margin: 0;

ul
    list-style: none;/*去掉小圆点*/

.nav li
    width: 100px;
    height: 40px;
    float: left;
    border: 1px solid #000;

.content
    width: 500px;
    height: 300px;
    background-color: pink;


.clear_float::after
    /*只需要给浮动元素的父容器添加上这个类就可以了: clear_float*/
    display: block;/*把::after设置成块级元素*/
    content: "";/*想让伪类起作用, 必须添加这个属性*/
    clear: both;

</style>
<div class="header">
    <ul class="nav clear_float">
        <li>导航 1</li>
        <li>导航 2</li>
        <li>导航 3</li>
    </ul>
</div>
<div class="content"></div>