Css—float的影响和解决方案

作者: 弱冠而不立 | 来源:发表于2020-08-12 09:26 被阅读0次

开门见山

推荐俩种依靠clear属于清除浮动的方法，推荐第二种，探究的记录在后面，赶时间的看个开头就好了。
1. 在受浮动坍塌的父级元素结束标签前，添加一个高宽为0的空div，然后设置clear:both

<div class="father">
        <div class="ch1">这是ch1</div>
        <div class="ch2">这是ch2</div>
        <div class="clear"></div>
    </div>

 .clear {
        clear: both;
    }

2 .创建一个clearfix样式，并使用伪类元素 after 添加样式到父元素上

<div class="father clearfix">
        <div class="ch1">这是ch1</div>
        <div class="ch2">这是ch2</div>
</div>

.father {
        width: 1000px;
        background-color: darkcyan;
        margin: 40px;
        border: 1px solid black;
    }
    .ch1 {
        height: 50px;
        width: 300px;
        float: left;
        background-color: rgba(100, 100, 100, 0.5);
    }

    .ch2 {
        height: 100px;
        width: 300px;
        float: right;
        background-color: pink;
    }

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

浮动的具体效果

无论是块级元素还是行内元素设置了浮动之后都会生成一个块级框，并且可以编辑它的宽高，此时该浮动元素就脱离了文档流。举个例子，把网页看成一个三维的泳池，文档流在泳池底部，给文档流中一个元素设置了float之后，它就从这个网页的泳池底部浮动到了水上。此时同级的块级元素会无视float元素在网页上的位置进行布局。但是行内元素并不会被遮挡，而是像和它一起浮在水面上一样环绕这个浮动元素。

效果图示意

设置 float 元素脱离文档流对父级元素的影响

根据前面介绍，元素设置float后好像会从网页上浮一样，脱离文档流。这样的话，如果父级元素原本没设置高度，计划用子元素撑开父级元素。此时子元素因为float上浮，则父级元素的高度就会因为自身没设置而坍塌。
来个示例 (下文都是依据这个示例来讨论，故先给出HTML结构和CSS样式)：

<div class="father">
        <div class="ch1">这是ch1</div>
        <div class="ch2">
            <div class="ch2-ch"></div>
            这是ch2
        </div>
    </div>

.father {
        width: 1000px;
        background-color: blue;
        margin-bottom: 30px;
        border: 1px solid black;
    }
    .ch1 {
        height: 50px;
        width: 300px;
        float: left;
        background-color: rgba(100, 100, 100, 0.5);
    }

    .ch2 {
        height: 50px;
        width: 300px;
        float: left;
        background-color: pink;
    }

    .ch2-ch {
        height: 20px;
        width: 100px;
        background-color: yellow;
    }

可以发现，似乎只有边框有作用但是上下边框粘在一起了

让我们再打开开发者工具具体看看

可以发现高度仅仅为2px，就是上下边框的宽度而已

然后让我们把父元素也一同浮动看看

.father {
        width: 1000px;
        background-color: blue;
        margin-bottom: 30px;
        border: 1px solid black;
        float: left;
    }

可以发现此时父元素有了一个和子元素相同大小的宽度，说明父元素也一同脱离了文档流

设置 float 元素脱离文档流对自身和同级元素的影响

例如:

<div class="ch1"></div>
<div class="ch2">这是ch2</div>

<style>
  .ch1 {
        height: 50px;
        width: 300px;
        float: left;
        background-color: rgba(100, 100, 100, 0.5);
    }

    .ch2 {
        height: 50px;
        width: 300px;
        /* float: left; */
        background-color: pink;
    }
</style>

此时背景色为粉色的 ch2 就会被浮动的背景色半透明的ch1 覆盖，但是ch2的字体还是环绕着ch1

粉色被覆盖后的效果

如果让ch2 也浮动，则ch1 和 ch2 就相当于一同浮起到这个网页泳池的水面上。

同时浮动的效果

文字环绕浮动元素排列的效果

另外，ch2 虽然不浮动起来时会被同级ch1遮挡，但是ch2 它内部的行内元素却是环绕 ch1 的 ,同时 ch2 内部的块级元素还是会被浮动起来的ch1遮挡。

 <div class="ch1">这是ch1</div>
 <div class="ch2">
       <div class="ch2-ch"></div>
       这是ch2
 </div>

    .ch1 {
        height: 50px;
        width: 300px;
        float: left;
        background-color: rgba(100, 100, 100, 0.5);
    }

    .ch2 {
        height: 50px;
        width: 300px;
        /* float: left; */
        background-color: pink;
    }

    .ch2-ch {
        height: 20px;
        width: 100px;
        background-color: yellow;
    }

ch2内部的黄色背景也被浮动起来的ch1遮挡

clear属性

解决父元素高度坍塌的问题，其实可以给父元素指定个高度，但这样就没有父元素高度自适应的意义了；另外全部元素一起浮动也能解决父元素坍塌，子元素被遮挡的问题，但这本质上只是将所有元素一起浮动到顶端，并没有解决问题，反而还会影响另外的元素排列。下面介绍clear属性来清除浮动

clear 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。clear 属性只能影响自身的布局，不会像float一样影响其他元素的排列。

那我们先来看看clear属性有什么用
我们稍稍改动一下上面的例子在ch2 下加一个 p 标签然，然后改动一下 ch1 和 ch2 的样式让它们俩高度不一样。

<body>
    <div class="father">
        <div class="ch1">这是ch1</div>
        <div class="ch2">
            <div class="ch2-ch"></div>
            这是ch2
        </div>
        <p>这是很短的一句话
        </p>
    </div>
</body>

 .ch1 {
        height: 50px;
        width: 300px;
        float: left;
        background-color: rgba(100, 100, 100, 0.5);
    }

    .ch2 {
        height: 100px;
        width: 300px;
        float: right;
        background-color: pink;
    }

添加一个p标签，紧挨浮动元素排列
如果我们此时给p标签加上clear 属性

这是clear:left的效果

这是clear:right的效果
我们能明显感受到 clear:right 的效果比 clear:left更往下偏移。这是因为 ch2 比ch1 要高，所以清除右浮动时，为了不让 p 元素受它之前向右浮动元素的影响，clear属性就将p元素移动到ch2下方。如果加上的是clear:both则目的是不让元素受它之前向左和向右浮动元素的影响。

这是clear:both的效果，因为高度的原因，满足clear:right即满足clear:left，所以效果和clear:right一样

若此时我们给p元素也加上浮动呢？

p元素向右浮动，三个浮动元素齐聚一行
然后我们再给p元素也加上clear属性

这是向右浮动的同时再clear:left

这是向右浮动的同时再clear:right
我们可以发现，p元素向右浮动了，但是同时由于clear属性的原因，它还要保持自身不受之前元素左右浮动的影响。
到此我们对clear属性也有了一个大概的了解。

使用clear 属性清除浮动

样例：

<body>
    <div class="father">
        <div class="ch1">这是ch1</div>
        <div class="ch2">这是ch2</div>
    </div>
</body>

 .father {
        width: 1000px;
        background-color: darkcyan;
        margin: 40px;
        border: 1px solid black;
    }
    .ch1 {
        height: 50px;
        width: 300px;
        float: left;
        background-color: rgba(100, 100, 100, 0.5);
    }

    .ch2 {
        height: 100px;
        width: 300px;
        float: right;
        background-color: pink;
    }

子元素左右浮动，父级元素崩塌

在受浮动元素影响的父级结束标签前，加一个空div清除浮动

<div class="father">
        <div class="ch1">这是ch1</div>
        <div class="ch2">这是ch2</div>
        <div class="clear"></div>
    </div>

 .clear {
        clear: both;
    }

在坍塌的父元素结束标签前添加一个空元素，然后给它设置clear:both

2.使用伪类元素after 添加样式到父元素上

<div class="father clearfix">
        <div class="ch1">这是ch1</div>
        <div class="ch2">这是ch2</div>
    </div>

.father {
        width: 1000px;
        background-color: darkcyan;
        margin: 40px;
        border: 1px solid black;
    }
    .ch1 {
        height: 50px;
        width: 300px;
        float: left;
        background-color: rgba(100, 100, 100, 0.5);
    }

    .ch2 {
        height: 100px;
        width: 300px;
        float: right;
        background-color: pink;
    }

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

这是用伪类，给父元素绑定样式清除浮动的效果
设置了一个clearfix类，然后给其伪类添加一个样式，display设为块级元素，content为空即可，然后clear属性设置为both即可。
根据上面探究的clear作用，我们能知道clear只对自身排列有作用（不允许自己受到之前元素浮动的影响），给父元素加上after块级伪类，然后不允许受之前元素左右浮动的影响，然后排列到最底部后父级元素高度就自适应到这块级伪类。
原理上和在父级元素结束标签前添加空div然后设置clear:both是一样的。但是更推荐使用clearfix类去清除浮动，原因就是因为类样式定义好了，可以随便引用，而第一种方法的话，倘若浮动元素很多，就得加很多空div去清除，后期维护很不方便。

网友评论

本文标题：Css—float的影响和解决方案

本文链接：https://www.haomeiwen.com/subject/liwddktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！