css 中 float 的属性及清除 float

最新推荐文章于 2024-05-05 20:21:31 发布

windylimiao

最新推荐文章于 2024-05-05 20:21:31 发布

阅读量2.4k

点赞数

文章标签： html css float

本文链接：https://blog.csdn.net/miao9999/article/details/95494726

版权

简单的 html

<body>
<div class="box1 ">
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</div>

<div class="box2 ">
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</div>
</body>

给 div 设置背景色

.box1 {
    background: #64bd63;
}

.box2 {
    background: #ff7e00;
}

li {
    width: 100px;
}

其他的样式都没有设置，这时运行是的效果是这样的

在这里插入图片描述

为 li 标签设置 float：left 后的效果是这样的

在这里插入图片描述

这是因为它的父容器 div 没有设置高度，在 li 设置了 float 属性之后，div 的高度就会变成0，不会被 div 内的其他元素撑出一个高度来，可以在浏览器中查看，显示 div.box1 的高度为0

在这里插入图片描述

在为 li 设置了 float 属性之后，它的父容器的高如果没有设置值的话，就会变成 0。

现在给 box1和 box2 设置 clear：both，清除 div 两边的 float，运行后的结果是这样的

在这里插入图片描述

这个时个 div 的高度还是0，如果给 div 指定高度值的话，它的效果是这样的，div 设置了高度之后，可以不会设置 clear：both 也会是这样的效果，这时div 的高度就是指定的高度

在这里插入图片描述

但是有的时候并不想要指定的高度，而是根据 div 中的内容自适应高度，可以用以下的方法来设置

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/
}

为 div 添加上述样式

<div class="box1 clearfix">
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</div>

<div class="box2 clearfix">
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>

</div>

运行后效果是这样的

在这里插入图片描述

.clearfix:before 的意思是在该容器的前面设置的属性
.clearfix:after 的意思是在该容器的后面设置的属性
其中的 content："“的意思是在容器的前后添加的内容为”"
dispaly：table，显示为块级，block 也是可以的，只要显示为块级就可以
如果不设置 content："" 的话是没有清除效果的，在前面也说到设置了 clear：both 之后，该容器的高度还是 0，那么在它之前和之前添加一些内容，即 conten：""，并且让它的显示方式为块级，这样就该容器就可以被容器内的元素撑开一个高度了

windylimiao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 中 float 的属性及清除 float

简单的 html<body><div class="box1 "> <ul> <li>111111</li> <li>222222</li> <li>333333</li> <li>444444</...
复制链接

扫一扫