布局：清除浮动

最新推荐文章于 2024-08-16 20:24:29 发布

媽呀

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量98

点赞数

分类专栏：前端学习文章标签： css css3 html html5 前端

本文链接：https://blog.csdn.net/qq_44729735/article/details/115524418

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

浮动元素可能导致父级元素高度塌陷，影响布局。清除浮动是为了恢复父级元素高度，常用方法包括额外标签法、overflow属性和伪元素。额外标签法通过添加无意义元素来清除，简单但增加结构复杂性；overflow属性通过设定hidden、auto或scroll来隐藏溢出内容并恢复父级高度，但可能隐藏必要内容；伪元素如clearfix通过内容为空的伪元素实现，适用于IE7以上浏览器，代码更整洁。

摘要由CSDN通过智能技术生成

为何要清除浮动

父级元素有时不方便给高度，子级元素浮动就会影响父级元素下的其他标准流的布局

浮动子元素与其父元素

父元素没有设置高度时，标准流下子元素会撑开父元素，但是当子元素浮动时子元素不会占用父元素的高度，则父元素高度为0，父元素下的标准流元素就会占据原本要给子元素留的空间 —— 子元素会遮挡住原本在他下方的标准流元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            background-color: blue;
        }
        .box1 div{
            float: left;
            width: 400px;
            height: 400px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .box2 {
            background-color: black;
            width: 900px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="d1"></div>
    <div class="d2"></div>
</div>
<div class="box2"></div>
</body>
</html>

清除浮动的本质

解决有高度子元素浮动时父元素高度为0的问题。清除浮动后父元素会被浮动的子元素撑开

清除浮动的方式

添加额外标签法

通过在浮动元素的末尾添加一个空标签例如<div style="clear:both"></div>用来清除浮动

优点：通俗易懂，书写方便
缺点：添加许多无意义标签，结构化差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .clear {
            clear: both;
        }
        .box1 {
            width: 900px;
            background-color: blue;
        }
        .d1,
        .d2{
            float: left;
            width: 400px;
            height: 400px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .box2 {
            background-color: black;
            width: 900px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="clear"></div>
</div>
<div class="box2"></div>
</body>
</html>

给父标签添加overflow:属性

overflow属性规定当内容溢出元素框时发生的事情。（overflow还未具体学习到，之后更新）
当overflow属性为overflow:hidden、overflow:auto、overflow:scroll时都可以清除浮动

优点：代码简洁
缺点：子元素增多时不会自动换行，会被隐藏，无法显示需要溢出的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*.clear {*/
        /*    clear: both;*/
        /*}*/
        .box1 {
            width: 900px;
            background-color: blue;
            overflow: auto;
        }
        .d1,
        .d2{
            float: left;
            width: 400px;
            height: 400px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .box2 {
            background-color: black;
            width: 900px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="d1"></div>
    <div class="d2"></div>
<!--    <div class="clear"></div>-->
</div>
<div class="box2"></div>
</body>
</html>

使用after伪元素清除浮动（伪元素还未学习，以后更新）

为额外标签法的升级版
代表：淘宝、百度、网易

优点：易于看懂结构（没有多余标签）
缺点：ie7及以下老版本浏览器不支持:after,需要用*zoom:1触发hasLayout

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       * {
           margin: 0;
           padding: 0;
       }
       .clearfix:after {
           content: "";
           display: block;
           height: 0;
           visibility: hidden;
           clear: both;
       }
       .clearfix {
           /*ie6,ie7专用*/
           *zoom:1;
       }
       /*.clear {*/
       /*    clear: both;*/
       /*}*/
       .box1 {
           width: 900px;
           background-color: blue;
           /*overflow: auto;*/
       }
       .d1,
       .d2{
           float: left;
           width: 400px;
           height: 400px;
       }
       .d1 {
           background-color: red;
       }
       .d2 {
           background-color: green;
       }
       .box2 {
           background-color: black;
           width: 900px;
           height: 500px;
       }
   </style>
</head>
<body>
<div class="box1 clearfix">
   <div class="d1"></div>
   <div class="d2"></div>
<!--    <div class="clear"></div>-->
</div>
<div class="box2"></div>
</body>
</html>

使用双伪元素清除浮动（未学习原理，以后更新）

伪元素简化版
代表：小米、腾讯

优点：代码更简洁
缺点：ie7及以下老版本浏览器不支持:after,需要用*zoom:1触发hasLayout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            /*ie7及以下专用*/
            *zoom:1;
        }
        .box1 {
            width: 900px;
            background-color: blue;
            /*overflow: auto;*/
        }
        .d1,
        .d2{
            float: left;
            width: 400px;
            height: 400px;
        }
        .d1 {
            background-color: red;
        }
        .d2 {
            background-color: green;
        }
        .box2 {
            background-color: black;
            width: 900px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="box1 clearfix">
    <div class="d1"></div>
    <div class="d2"></div>
</div>
<div class="box2"></div>
</body>
</html>

媽呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局：清除浮动

为何要清除浮动父级元素有时不方便给高度，子级元素浮动就会影响父级元素下的其他标准流的布局浮动子元素与其父元素       父元素没有设置高度时，标准流下子元素会撑开父元素，但是当子元素浮动时子元素不会占用父元素的高度，则父元素高度为0，父元素下的标准流元素就会占据原本要给子元素留的空间 —— 子元素会遮挡住原本在他下方的标准流元素<!DOCTYPE html><html lang="en
复制链接

扫一扫