CSS_浮动排版布局
bye
发布于 2020-11-24 07:15:00
发布于 2020-11-24 07:15:00
代码可运行
运行总次数：0
代码可运行
当在排版布局时，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;
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/11/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
![[CSS] 浮动布局的深入理解与应用](https://developer.qcloudimg.com/http-save/yehe-11029094/0eb0b4b983804dec0dd9e851b0f86ae4.png)
推荐阅读
相关推荐
CSS清除浮动
更多 >
腾讯云开发者
