常见问题1--清浮动

最新推荐文章于 2024-05-31 14:44:29 发布

呜噜噜。。

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量178

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/u014608643/article/details/125828796

版权

场景：父盒子没有高度，里面的子盒子都浮动，那么会导致父盒子后面的盒子不会老老实实的摆在父盒子下面，而是会忽略父盒子从而直接放在父盒子的位置上

问题原因：浮动float,会导致子盒子脱离文档流，从而不会影响父盒子的实际高度，因此当前父盒子高度为0。因为父盒子下面的盒子的实际位置受当前父盒子位置的影响，但现在这个父盒子高度为0，即不占位置，那么下面再放盒子就会无视它喽

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 800px;
            background-color: skyblue;
        }
        .left {
            width: 400px;
            height: 100000px;
            float: left; 
            background-color: green;
        }
        .right {
            width: 300px;
            height: 500px;
            float: right; 
            background-color: red;
        }
        .botton {
            width: 900px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="botton"></div>
</body>

解决方法

1.添加高度法：给父盒子加上一个固定高度，即让它占据一定的位置

局限性：但是我们在实际开发中，有些情况如果我们给盒子设定了固定的高度的话，会使布局受到很大的局限

    <style>
        .box {
            height: 200px;//修改后 添加固定高度
        }
    <style>

2.额外标签法:在父盒子内容的最后加上一个块级标签，并给它一个属性clear:both

弊端:代码中添加了额外的标签，会导致HTML结构变得复杂

    <style>
        .clearfix{
            clear:both//用于清除两侧的的浮动
        }
    <style>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
            <div class="clearfix"></div>//新添加的清浮动元素    
        </div>
        <div class="botton"></div>
    </body>

3.单伪元素清除法（原理原方法二一样，只是为了解决添加而外标签的问题）：用伪元素替代额外标签

        <style>
            .clearfix::after{
                content: '';//设定伪元素内容为空
                display: block;//伪元素属于行内元素 而我们需要的是块级元素
                clear: both;//清除必备
                //为了兼容性
                height:0;//某些浏览器因为兼容性问题，会自动识别出来一个高度
                visibility: hidden;//隐藏
            }
        <style>
        <body>
            <div class="box clearfix">
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <div class="botton"></div>
        </body>

4.双伪元素清除法：（好处是即可以清浮动，又可以解决高度塌陷问题）（比较常用）

    </style>
         /*让.clearfix::before 具备display:table 属性
        原因：让父级变成table元素（非block块级） 避免高度塌陷问题
        高度塌陷问题：当父子标签均为块级，子级设置margin会影响父级的位置*/
        .clearfix::after,.clearfix::before{
            content: '';
            display: table;
        }
        /*真正用于清楚浮动的操作*/
        .clearfix::after{
            clear: both;
        }
    </style>

5.给父元素设置overflow:hidden

    </style>
        .clearfix{
            overflow:hidden
        }
    </style>

呜噜噜。。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常见问题1--清浮动

清浮动问题的五个解决方案
复制链接

扫一扫

常见问题1--清浮动

“相关推荐”对你有帮助么？