您的位置: 首页  >  文章  >  让霸道的块级元素并排---浮动

让霸道的块级元素并排---浮动

分类: 文章 • 2025-03-17 15:10:03

float:left/right/none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*浏览器默认展示的元素位置-- 标准流
        如果想让盒子从左到右排 -> 浮动 float: left right none
        并排的所有元素同时加浮动属性 --> 浮动流
        */
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            /*float: left;*/
        }
        /*伪类选择器
            语法:
            标签名/类名:first-child{
                }
            标签名/类名:last-child{
                }
            标签名/类名:nth-child(2*n+1){
                }
            */
        .box:first-child{
            /*box父亲的第一个孩子*/
            background-color: #4c8ced;
        }
        .box:nth-child(2){
            background-color: #cc4a44;
        }
        .box:nth-child(3){
            background-color: red;
        }
        .box:nth-child(4){
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div class="box">第一个孩子</div>
<div class="box">第二个孩子</div>
<div class="box">第三个孩子</div>
<div class="box">第四个孩子</div>
</body>
</html>

让霸道的块级元素并排---浮动

将上面代码段中  float: left;  取消注释,页面展示如下:

让霸道的块级元素并排---浮动

问题:浮动元素不在界面上,导致下面的元素占领并排盒子的位置,父盒子高度塌陷

解决方法:

1、给父元素设定高度 不实际

.father{
    height: 200px;
}

2、overflow:hidden  会把有用的东西隐藏掉

.father{
    overflow: hidden;
}

3、清除浮动影响  clear: both left right 没有实现结构和样式相分离

<div class="father clearFix">
    <div class="box">第一个孩子</div>
    <div class="box">第二个孩子</div>
    <div class="box">第三个孩子</div>
    <div class="box">第四个孩子</div>
    <div style="clear: both"></div>
</div>

4、创造一个不属于文档树的标签--->样式上创造标签-->伪元素

/*伪元素默认是行内元素 清除浮动影响需用块级*/
.clearFix::after{
    content: '';
    clear: both;
    line-height: 0;
    display: block;
}

解决后，网页显示：

让霸道的块级元素并排---浮动

相关推荐