文章目录

浮动
优点
缺点
清除浮动
- 一、额外标签法
- - 实例
- 二、父级添加overflow属性
- - 实例
- 三、使用：after
- - 实例
- 四、使用双伪元素
- - 实例
- 五、手动设置父级高度
- - 实例
注意

浮动

当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变得好像浮动元素不存在一样。

优点

在图文混排的时候可以很好的使文字环绕在图片周围
当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的：第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素的高度塌陷

清除浮动

一、额外标签法

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

添加空标签，并设置样式。

clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除左右浮动
clear:none 左右浮动都不清除

实例

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>html" title=css>css">
        .wrapper{
            width: 600px;
            border: 2px solid black;
        }
        .box1, .box2, .box3 {
            width: 200px;
            height: 150px;
        }

        .box1 {
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }
        .box3 {
            background-color: green;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="clear"></div>
    <div class="box3">box3</div>
</div>

</body>
</html>

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来

二、父级添加overflow属性

在要清除浮动父级添加样式：overflow:hidden

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，可在元素浮动的父级盒子添加样式overflow:hidden。

html"><div class="parents"html" title=css>css"> style="overflow:hidden;"></div>

属性值：

visible:默认值。内容不会被修建，会呈现在元素框之外，不剪切页不添加滚动条。

auto:不显示超出内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动。

hidden：内容会被修建，且剩余内容不可见，此属性还有清除浮动、清除margin-top塌陷的功能。

scroll:内容会被修建，但是浏览器会显示滚动条以便查看剩余内容。

原理：触发BFC（块格式化上下文）。

当元素设置了overflow样式，且值不为visible时，该元素就建构了一个BFC(哪些情况下，元素可以建构出BFC，可以看查看CSS文档对BFC的定义)。在我们的例子中，父盒子因设置了值为hidden的overflow样式，所以该元素建构出一个BFC，按照第三个特点，BFC的高度是要包括浮动元素的，所以父盒子的高度被撑起来，达到了清除浮动影响的目的。

实例

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>html" title=css>css">
        .wrapper {
            width: 600px;
            border: 2px solid black;
            margin: 50px auto;

            /*清除浮动*/
            overflow: hidden;
        }

        .box1, .box2, .box3 {
            width: 200px;
            height: 150px;
        }

        .box1 {
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }

        .box3 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>

</div>
<div class="box3">box3</div>

</body>
</html>

原理

通过触发BFC方式，实现清除浮动

优点

代码简洁

缺点

内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

推荐使用

三、使用：after

为了减少多余的空标签，可采用给父级的伪元素添加样式实现清除浮动。

html" title=css>css">.clear:after{
	display:block;
	content:'';
	clear:both
}

该样式在clear，即父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。注意到该伪元素的display值为block，即，它是一个不可见的块级元素（有的地方使用table，因为table也是一个块级元素）。你可能已经意识到，这也只不过是前一种清除浮动方法（添加空白div）的另一种变形，其底层逻辑也是完全一样的。

实例

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>html" title=css>css">
        .wrapper {
            width: 600px;
            border: 2px solid black;
            margin: 50px auto;
        }

        .wrapper:after {
            /*    清除浮动*/
            content: "";
            display: block;
            clear: both;
        }

        .box1, .box2, .box3 {
            width: 200px;
            height: 150px;
        }

        .box1 {
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }

        .box3 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>
<div class="box3">box3</div>

</body>
</html>

四、使用双伪元素

同时使用:befor和:after。

原理和前者大差不差。

实例

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>html" title=css>css">
        .wrapper {
            width: 600px;
            border: 2px solid black;
            margin: 50px auto;
        }
        /* 清除浮动 */
        .wrapper:after,.wrapper:before{
            content: "";
            display: table;
        }
        .wrapper:after{
            clear: both;
        }

        .box1, .box2, .box3 {
            width: 200px;
            height: 150px;
        }

        .box1 {
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }

        .box3 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>
<div class="box3">box3</div>

</body>
</html>

五、手动设置父级高度

因为父盒子没有设定高度，所以才会塌陷，这种时候可以手动给父盒子设置高度，不让它塌陷。

但是，不推荐使用！面试时候可以提一嘴。

实例

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>html" title=css>css">
        .wrapper {
            width: 600px;
            border: 2px solid black;
            margin: 50px auto;
        /*    手动指定高度*/
            height: 300px;
        }


        .box1, .box2, .box3 {
            width: 200px;
            height: 150px;
        }

        .box1 {
            background-color: #FF0000;
            float: left;
        }

        .box2 {
            background-color: blue;
            float: left;
        }

        .box3 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>
<div class="box3">box3</div>

</body>
</html>

注意

在实际项目开发中，一般首选第二种方法。

CSS清除浮动的几种常见方法

文章目录

浮动

优点

缺点

清除浮动

一、额外标签法

实例

二、父级添加overflow属性

实例

三、使用：after

实例

四、使用双伪元素

实例

五、手动设置父级高度

实例

注意

相关文章

Hive入门介绍

函数的方法Date

[leetcode]678. 有效的括号字符串（双栈写法）

用 Jenkins + .netcore 2.0 构建

自定义导入弹框

Array.prototype.slice()

面向对象设计中private，public，protected的访问控制原则及静态代码块的初始化顺序...

vue使用canvas渲染pdf