CSS_浮动排版布局
程序员文章站
2024-01-28 18:10:52
...
当在排版布局时，abc都用了float，此时abc相当于脱离父元素浮出来了，但是d没有使用浮动，就会出现d的一部分处在abc的下面(因为abc浮上去了),d就被遮住了一部分，这时候有几种处理方法：
（1）在abc的外层加上一层父元素，并设定高度
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.outer{
height: 100px;
}
<!--其他的样式设置省略掉了-->
</style>
</head>
<body>
<div class="outer">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<div class="d"></div>
</body>
</html>为什么要设置父元素呢，子元素不是设置了大小，不是应该被子元素撑开吗？？
因为abc三个子元素设置了浮动，相当于浮起来了，不占据空间，所以撑不开，所以设置高度是一种解决这个问题的方法。
（2）方法2：给父元素设置属性overflow:auto;
overflow:溢出的意思。
auto:自动调整的意思
意思是对于超出父元素的元素，父元素自动调整高度，就不会影响后面的布局
.outer{
overflow: auto;
}（3）方法3：clear：left/right/both
谁不希望受到浮动的影响谁就设置clear属性
此时d不想受到浮动的影响，所以将.d设置clear属性
.d{
width: 100%;
background: lightskyblue;
height: 200px;
clear: both;
}