【css】css 清除浮动的三种方法

最新推荐文章于 2022-05-30 20:50:29 发布

光明山顶

最新推荐文章于 2022-05-30 20:50:29 发布

阅读量288

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/t13965688123/article/details/124756218

版权

css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

浮动元素碰到包含它的边框或者浮动元素的边框就会停留下来。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动的影响：
（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置
（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示

清除浮动的3个方法：

①额外标签 clear:both

在浮动元素后面放一个空的 div 标签，div 设置样式 clear:both 来清除浮动。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>额外标签clear:both</title>
    <style>
    .fahter{
        width: 400px;        
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;        
        height: 200px;        
        background: darkorange;        
        float: left;
    }
    .small{
        width: 120px;        
        height: 120px;        
        background: darkmagenta;        
        float: left;
    }
    .clear{
        clear:both;
    }
    </style>
</head>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
 </body>

②利用BFC，使用CSS的 overflow 属性

当给父元素设置了 overflow 样式，不管是 overflow: hidden 或 overflow: auto 都可以清除浮动，只要它的值不为 visible 就可以了，它的本质就是建构了一个 BFC，这样使得达到撑起父元素高度的效果

    .fahter{
        width: 400px;        
        border: 1px solid deeppink;        
        overflow: hidden;
    }

③使用after(推荐)

给父元素添加了:after 伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

<style>
    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";        
        display: block;        
        height: 0;        
        clear:both;        
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
</style>
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
</body>