浮动元素使其父元素高度塌陷我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。

从以上两张图中可以看出添加浮动元素后，li元素按照规则横向排列，但是父元素却消失不见了。

为父元素添加一个5px的边框，在li元素添加浮动后，边框并没有被内容撑开。

在第一个示例中仿佛父元素消失了，但在第二个示例中发现其实父元素并没有消失，只是高度被计算为0。这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离文档流”，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）

解决方法：

1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。
2、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。
3、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。
4、给父元素添加 overflow：hidden；【后有详解】
5、通过伪类::after清除浮动 【后有详解】

overflow:hidden;

• 隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观
• 清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。

::after 伪类

利用伪类来清楚浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，只不过这里用伪类代替了空的div元素

<div class="box">
    <div class="son">我是浮动的子元素</div>
</div>

.box {
    width:400px;
    background:#F00;
}
.son {
    float:left;
}
.son::after {
    content:"";
    clear:both;/*清除浮动*/
    display:block;/*确保该元素是一个块级元素*/
}

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS怎样做多种宫格的布局效果？

  用CSS怎样做多种宫格的布局效果？对于宫格布局大家应该都不陌生，我们比较常见的有四宫格、九宫格，那么如果想要实现更多宫格的局部，要怎样做呢？这篇文章我们来了解以下用CSS怎样实做多种宫格的布局效果。

• CSS类选择器的格式怎么写，要注意哪些

  每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名。在同一个界面中class的名称是可以重复的。在编写class选择器时一定要在class名称前面加上.即可。

• 用CSS3怎样做一个简易的旋转动画效果？

  这篇文章给大家分享的是用CSS3做一个简易的旋转动画效果。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• margin外边距合并有哪些解决方法，哪种方法好

  这篇文章主要介绍了解决margin 外边距合并问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

• CSS中常用的动画属性有什么，如何使用

  这篇文章主要介绍了css动画属性使用及实例代码(transition/transform/animation) ,需要的朋友可以参考下