在举行网页规划时，经常会用到float浮动属性，然则当父元素下的子元素设置了浮动就会形成父元素陷落。接下来我们将在文章中为人人细致引见怎样处理因浮动而形成父元素陷落的题目，具有肯定的参考作用，愿望对人人有所协助
【引荐课程：CSS教程】
当给一个元素的父元素设置了背景色彩以后，再为子元素设置浮动后会发明父元素的背景色彩消逝了，而且当父元素有一个边框时会发明浮动元素没法将边框撑开。
例：没有给li设置浮动
<ul style="background: pink;border: 1px solid #ccc"> <li>ki4网</li> <li>ki4网</li> <li>ki4网</li> <li>ki4网</li> </ul>
效果图：
设置了浮动以后
<ul style="background: pink;border: 1px solid #ccc"> <li style="float: left;list-style: none;">ki4网</li> <li style="float: left;list-style: none;">ki4网</li> <li style="float: left;list-style: none;">ki4网</li> <li style="float: left;list-style: none;">ki4网</li> </ul>
效果图
从上图中能够看出当子元素设置了浮动以后，父元素的内容没有被撑开。也就是说元素设置浮动后，就不在全部文档流的统领局限，那末它之前存在在父元素内的高度就跟着浮动不复存在了，而此时父元素会默许自身内里没有任何内容（条件是未给父元素设置牢固高度，假如父元素自身有牢固高度，就不会涌现这类状况）就会发作陷落
父元素陷落处理要领：
（1）给父级元素增加一个高度
此要领中高度没法确认，须要屡次尝试设置
<ul style="height:200px;background: pink;border: 1px solid #ccc">
（2）在末了一个子元素后加一个空的div，给他增加款式clear，消灭两侧浮动；
<div style="clear:both;"></div>
（3）父级元素设置overflow：hidden；
<ul style="background: pink;border: 1px solid #ccc;overflow: hidden;">
（4）父级元素增加after伪类；
.parent:after{
content:"";
display:block;
clear:both;
}
总结：以上就是本篇文章的全部内容了，愿望对人人有所协助。
以上就是float浮动形成父级元素陷落的处理要领的细致内容，更多请关注ki4网别的相干文章！
