说说CSS浮动以及清除浮动

最新推荐文章于 2024-01-26 14:14:33 发布

原创最新推荐文章于 2024-01-26 14:14:33 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

本文深入探讨CSS中浮动的概念，解析浮动元素如何脱离文档流并影响周围元素布局。同时，详细介绍了清除浮动的多种方法，包括使用clear属性、伪元素、BFC以及浮动容器自身等，帮助解决由浮动引发的布局问题。

说说CSS浮动以及清除浮动

<style>
    #main{
        width:500px;
        height:300px;
        background:#cccccc;
    }
    #child1{
        width:100px;
        height:100px;
        background:#f000f0;
    }
    #child2{
        width:100px;
        height:100px;
        background:#0000ff;
        
    }
</style>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>

在这里插入图片描述

1】给`child1`加上`float`属性

#child1{
    float:left;/*浮动的元素，脱离文档流，空间释放*/
}

在这里插入图片描述

#child1{
    float:right;/*浮动的元素，脱离文档流，空间释放*/
}

在这里插入图片描述

2】给`child1`加上`float`属性，后再给`child2`加上`float`属性

#child1{
    float:left;/*浮动的元素，脱离文档流，空间释放*/
}
#child2{
    float:left;
}

在这里插入图片描述

#child1{
    float:left;/*浮动的元素，脱离文档流，空间释放*/
}
#child2{
    float:right;
}

在这里插入图片描述

清除浮动的意义：使clear清除浮动的元素的左右两边没有浮动元素，也就是说容器内使用float属性的兄弟元素依然会占去文档改占据的位置，使得该clear清除浮动的元素在下一行显示。（还原文档流）

下面是一个栗子：

<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>

此时是正常块级元素文档流。

在这里插入图片描述
现在我们在child1上面使用float属性，child1会脱离文档流（不会占据文档大小空间），child2会向上移动，所以出现右边的重叠情况。

然后我们在child2上面使用清除浮动clear属性，会还原周围兄弟元素的文档流（也就是浮动的兄弟元素又会占据文档大小空间），所以就有右边图child2向下移，child1开始占据文档大小空间。
在这里插入图片描述

浮动带来的问题：

如果我们现在加入了一个<P>标签（p标签是块级元素）

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围。

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

<style>
    #main{
        width:500px;
        height:300px;
        background:#cccccc;
    }
    #child1{
        width:100px;
        height:100px;
        background:#f000f0;
        float:left;
    }
    #child2{
        width:100px;
        height:100px;
        background:#0000ff;
        float:left
    }
    p{
    	background: #00ff00;
    }
</style>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵<</p>
    </div>
</body>

在这里插入图片描述

1】此时可以使用clear属性来进行对文本行框进行清除浮动

clear属性的值可以是 left、right、both 或none，它表示框的哪些边不应该挨着浮动框。

p{
    background: #00ff00;
    clear:both;
}

在这里插入图片描述

2】外部容器高度自适应，浮动内部所有元素，背景颜色受影响问题

<style>
    #main{
        width:500px;
        background:#cccccc;
    }
    #child1{
        width:100px;
        height:100px;
        background:#f000f0;
    }
    #child2{
        width:100px;
        height:100px;
        background:#0000ff;
    }
 </style>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>

在这里插入图片描述
此时在粉色child1和蓝色child2上面都添加浮动float属性

    #child1{
        float:left;
    }
    #child2{
        float:left;
    }

在这里插入图片描述
我们如何才能让外部容器的背景颜色保持自适应高度呢？

方法一：在容器内增加一个兄弟元素，然后用它清除浮动

<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <div class="clear"></div>
    </div>
</body>

.clear{
    clear: left;
}

此时我们发现clear元素高度为0，浮动的child1和child2还原了文档流，使得clear元素处于正常的文档流上，即在他们下面一行。
在这里插入图片描述

方式二：使用容器的伪元素来clear清除浮动

首先我们来看看伪元素生产的原理：::before和::after这两个伪元素配content可以创建出两个伪元素。这样一来，一个HTML元素就具备多个盒模型，即有多个背景和边框等，正如下图所示：

比如下面我们通过::before和::after来创建盒子

<style type="text/css">
    #main::after{
        content: '';
    }
    #main::before{
        content: '';
    }
</style>
<body>
    <div id="main"></div>
</body>

在这里插入图片描述
明白了伪元素的创建原理我们就可以用伪元素来模拟使用clear来清除浮动。

代码如下：

<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>

#main::after{
    clear: left;
}

在这里插入图片描述

方法三：创建BFC就可以包含住浮动的子元素了，设置overflow的方法（hidden和auto都可以实现）

<div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
</div>

  #main{
        overflow: hidden;
    }

在这里插入图片描述

#main{
    overflow: auto;
}

在这里插入图片描述

方法四：使容器也是浮动，这也也可以创建BFC

#main{
    float:left;
}

在这里插入图片描述

说说CSS浮动以及清除浮动

说说CSS浮动以及清除浮动

1】给child1加上float属性

2】给child1加上float属性，后再给child2加上float属性

清除浮动的意义：使clear清除浮动的元素的左右两边没有浮动元素，也就是说容器内使用float属性的兄弟元素依然会占去文档改占据的位置，使得该clear清除浮动的元素在下一行显示。（还原文档流）

浮动带来的问题：

1】此时可以使用clear属性来进行对文本行框进行清除浮动

2】外部容器高度自适应，浮动内部所有元素，背景颜色受影响问题

方法一：在容器内增加一个兄弟元素，然后用它清除浮动

方式二：使用容器的伪元素来clear清除浮动

方法三：创建BFC就可以包含住浮动的子元素了，设置overflow的方法（hidden和auto都可以实现）

方法四：使容器也是浮动，这也也可以创建BFC

1】给`child1`加上`float`属性

2】给`child1`加上`float`属性，后再给`child2`加上`float`属性