css清除浮动有关的代码,求解答

发布网友发布时间：2022-04-28 12:57

我来回答

共2个回答

懂视网时间：2022-04-28 17:18

本篇文章给大家带来的内容是关于css中浮动的常见用法以及清除浮动的介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

浮动是CSS中一个相对比较麻烦的属性，与之伴随的通常是清除浮动。今天我们一起来搞定浮动。

常见的用法

事实上，当我们将一个元素设置成浮动时，达到的效果如下图：

这种版式相信大家都见过，很多杂志都会采用这种左边或者右边插图，文字环绕的效果。

另一种常见的浮动的用法如下图：

即在某一行内，使某一部分右对齐，通常不会用margin实现，而是使用浮动。

浮动带来的问题

浮动的元素无法撑开父元素，即导致高度坍塌！！

来看下面的例子：

<div class="container">
 <div class="son1"></div>
 <div class="son2"></div>
</div>

.container {
 background-color: lightblue;
 font-size: 0;
}
.son1 {
 display: inline-block;
 width: 50px;
 height: 50px;
 background-color: orange;
}
.son2 {
 width: 100px;
 height: 100px;
 float: right;
 background-color: lightgray;
}

当较大的方块浮动时，我们可以看到他无法撑开父元素。通常情况下这不是我们想要的结果，因为这会导致布局混乱。当父元素内的子元素全部浮动时尤其明显，父元素的高度会坍塌为0。

清除浮动

因此，当我们用到了浮动，又不想出现这种情况的时候，就需要清除浮动。

清除浮动的方式可能有很多种，但是现在比较流行，我个人比较喜欢的方式如下：

首先，添加以下CSS：

.clearfix:after {
 content: '.';
 display: block;
 height: 0;
 visibility: hidden;
 clear: both;
}

然后，在父容器上添加clearfix类，最后代码如下：

<div class="container clearfix">
 <div class="son1"></div>
 <div class="son2"></div>
</div>

.container {
 background-color: lightblue;
 font-size: 0;
}
.son1 {
 display: inline-block;
 width: 50px;
 height: 50px;
 background-color: orange;
}
.son2 {
 width: 100px;
 height: 100px;
 float: right;
 background-color: lightgray;
}
.clearfix:after {
 content: '.';
 display: block;
 height: 0;
 visibility: hidden;
 clear: both;
}

得到的效果如下：

浮动的元素就可以撑开父容器的高度啦！

总结

浮动的元素无法撑开父容器的高度，所以需要清除浮动

浮动可以很简单的实现右对齐。

浮动可以很简单的实现文字环绕效果。

因此，注意浮动的使用场景，并且在需要的时候清除浮动，就可以很好的控制浮动啦

热心网友时间：2022-04-28 14:26

.fn-clear:after {//利用伪类来清除浮动，减少代码
    content: " ";//伪类必须要有的属性
    clear: both;//清楚所有的浮动
    display: block;//设置伪类为块状元素
    font-size: 0;//字体大小为0
    visibility: hidden;//元素的状态为隐藏
    height: 0;//高度为0
    width:100%;//最好加个宽度100%
   }
.fn-clear {
    zoom: 1;//ie上的属性，现在用的比较少了
}

追问难道不是只需要clear：both；就行了么，为什么还要加上其他的一些属性？

追答使用伪类时有*条件的，要让伪类变成一个直线而且还不能影响页面的布局，所以才需要那么多的属性