清除浮动的四种方法

最新推荐文章于 2023-07-20 17:15:10 发布

三千繁华不及你眉眼

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量246

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/lancelote_pc/article/details/105354228

版权

清除浮动的几种方法

今天面试被问了一个常考的问题如何清除浮动，本身这个技术没总结过，加上嘴笨，回答的不怎么样，于是简单的整理一下

1.为什么清除浮动

总是要清除浮动，为什么呢，使用浮动之后出现什么预期之外的显示效果要清除浮动，总结一下，我认为是为了解决浮动带来的高度塌陷

2.高度塌陷

先给一个父元素只设置宽度，不设置高度，给一个边框，这样会看的更清楚。再给两个子元素 first 和second 正常设置宽高，先不设置浮动，这两个子元素就会把父元素的高度给撑起来

    <style>
        .container{
            width:300px;
            border:1px solid black;
        }
        #first{
            height:100px;
            width:100px;
            background: yellow;
            border:1px solid black;
        }
        #second{
            height:50px;
            width:200px;
            border:1px solid black;
            background: blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="first"></div>
    <div id="second"></div>
</div>

</body>

把first 和second 添加 float:left; 这时候会发现父元素因为没有设置高度，已经变成了一条线/

    <style>
        .container{
            width:300px;
            border:1px solid black;
        }
        #first{
            height:100px;
            width:100px;
            background: yellow;
            border:1px solid black;
            float:left;
        }
        #second{
            height:50px;
            width:200px;
            border:1px solid black;
            background: blue;
            float:left;
        }
    </style>

3.清除浮动的几种方法

3.1 隔墙法或者叫额外标签法

在浮动的块底下，添加一个新的空标签，并且设置属性 clear:both
清楚了浮动，父元素检测出了所有子元素的高度

    <style>
        .container{
            width:300px;
            border:1px solid black;
        }
        #first{
            height:100px;
            width:100px;
            background: yellow;
            border:1px solid black;
            float:left;
        }
        #second{
            height:50px;
            width:200px;
            border:1px solid black;
            background: blue;
            float:left;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="first"></div>
    <div id="second"></div>
    <div class="clear"></div>
</div>

3.2 父元素添加overflow属性

优点：简单、代码少父元素就一行代码
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

 <style>
        .container{
            width:300px;
            border:1px solid black;
            overflow: hidden;
        }
       
    </style>

3.3 父元素使用伪元素

从代码中就可以看出来，和第一种方法类似，只不过是用伪元素替代了那个空标签
伪元素设置为块元素


    <style>
        .container{
            width:300px;
            border:1px solid black;
        }
        #first{
            height:100px;
            width:100px;
            background: yellow;
            border:1px solid black;
            float:left;
        }
        #second{
            height:50px;
            width:200px;
            border:1px solid black;
            background: blue;
            float:left;
        }
        .container:after{
            content: '';
            height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
    </style>

3.4父元素使用双伪元素

原理同上只不过使用了两个伪元素，代码更加简单

    <style>
        .container{
            width:300px;
            border:1px solid black;
        }
        #first{
            height:100px;
            width:100px;
            background: yellow;
            border:1px solid black;
            float:left;
        }
        #second{
            height:50px;
            width:200px;
            border:1px solid black;
            background: blue;
            float:left;
        }
        .container:after, .container:before {
            content: "";
            display: block;
            clear: both;
        }
    </style>

3.5 设置父元素高度(感觉听着像废话一样，这条就不算了)

父级div手动定义height，就解决了父级div无法自动获取到高度的问题
适合于高度固定的布局，自适应布局就不行了获取不到具体高度

大概就是这些 markdown的图片我不太会插入，所以看的不那么直观，讲究看一下，有问题欢迎各位指正

三千繁华不及你眉眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的四种方法

清除浮动的几种方法今天面试被问了一个常考的问题如何清除浮动，本身这个技术没总结过，加上嘴笨，回答的不怎么样，于是简单的整理一下1.为什么清除浮动总是要清除浮动，为什么呢，使用浮动之后出现什么预期之外的显示效果要清除浮动，总结一下，我认为是为了解决浮动带来的高度塌陷2.高度塌陷先给一个父元素只设置宽度，不设置高度，给一个边框，这样会看的更清楚。再给两个子元素 first ...
复制链接

扫一扫