增加和清除浮动

最新推荐文章于 2023-04-03 20:25:44 发布

YourLie_in_April

最新推荐文章于 2023-04-03 20:25:44 发布

阅读量440

点赞数 1

分类专栏： HTML、CSS 文章标签： html5 css

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/123990638

版权

HTML、CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

float: （增加浮动）属性值：left 元素向左浮动、right 元素向右浮动、 none （为默认值）元素不浮动。

（浮动：如字面意思所说，会将选择的元素进行浮空挪动，所以它已不存在在原来的位置上，会造

成原来盒子的坍塌。）

clear：（清除浮动）属性值：left 在左侧不允许浮动元素、right 在右侧不允许浮动元素、both

在左、右两侧不允许浮动元素、 none （为默认值）允许浮动元素出现在两侧。

清除浮动，防止盒子塌陷的四种方法：

1、在浮动元素后面加空div，再使用clear:both;。（但空div会造成HTML代码冗余。）

2、设置父元素的高度，将浮动元素包裹进去。（元素固定高会降低扩展性。）

3、父级添加overflow属性，即overflow: hidden;。（下拉列表框的场景不能用。）

{overflow：（对溢出属性处理） 属性值：visible 默认值。内容不会被修剪，会呈现在盒子之

外、hidden 内容会被修剪，并且其余内容是不可见的、scroll 内容会被修剪，但是浏览器会显示

滚动条以便查看其余内容、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。}

4、父级添加伪类after：

XXXX::after{

content: ''; /*在clear类后面添加内容为空*/

display: block; /* 把添加的内容转化为块元素 */

clear: both; /*清除这个元素两边的浮动*/

}

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多彩照片墙</title>
    <style>
    *{padding: 0;margin: 0;list-style: none;}
.box{
    margin: 0 auto;
    width: 800px;
}
.box ul li{
    width: 175px;
    height: 130px;
    border-radius: 5px ;
    border: 1px solid #ccc;
    float: left;
    margin: 15px 10px;
}
.box .zt .yi{
    width: 160px;
    height: 121px;
    background: url(./素材/img/1.jpg) no-repeat;
    background-size: 100%;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
} 
.box .zt .er{
    width: 160px;
    height: 121px;
    background: url(./素材/img/2.jpg) no-repeat;
    background-size: 100%;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
} 
.box .zt .san{
    width: 160px;
    height: 121px;
    background: url(./素材/img/3.jpg) no-repeat;
    background-size: 100%;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
} 
.box .zt .si{
    width: 160px;
    height: 121px;
    background: url(./素材/img/4.jpg) no-repeat;
    background-size: 100%;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
} 
.box .zt .wu{
    width: 160px;
    height: 121px;
    background: url(./素材/img/5.jpg) no-repeat;
    background-size: 100%;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
} 
.box .zt .liu{
    width: 160px;
    height: 121px;
    background: url(./素材/img/6.jpg) no-repeat;
    background-size: 100%;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
} 
.box .zt .qi{
    width: 160px;
    height: 121px;
    background: url(./素材/img/7.png) no-repeat;
    background-size: 100%;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
} 
.box .zt .ba{
    width: 160px;
    height: 121px;
    background: url(./素材/img/8.png) no-repeat;
    background-size: 100%;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
} 
.box .zt::after{
    content: "";
    display: block;
    clear:both;
}
    </style>
</head>
<body>
    <div class="box">
        <ul class="zt">
            <li><div class="yi"></div></li>
            <li><div class="er"></div></li>
            <li><div class="san"></div></li>
            <li><div class="si"></div></li>
            <li><div class="wu"></div></li>
            <li><div class="liu"></div></li>
            <li><div class="qi"></div></li>
            <li><div class="ba"></div></li>
        </ul>
    </div>
</body>
</html>

总结： 望各位大佬指正。

YourLie_in_April

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
增加和清除浮动

float: （增加浮动）属性值：left元素向左浮动、right 元素向右浮动、 none（为默认值）元素不浮动。（浮动：如字面意思所说，会将选择的元素进行浮空挪动，所以它已不存在在原来的位置上，会造成原来盒子的坍塌。）clear：（清除浮动）属性值：left 在左侧不允许浮动元素、right 在右侧不允许浮动元素、both在左、右两侧不允许浮动元素、 none （为默认值）允许浮动元素出现在两侧。清除浮动，防止盒子塌陷的四种方法：1、在浮动元素后面加空div，再使用cle...
复制链接

扫一扫