网页布局中,如何清除元素的浮动???
发布网友
发布时间：2022-04-06 07:35
共3个回答
懂视网
时间：2022-04-06 11:56
容器元素闭合标签前添加额外元素并设置clear: both
父元素触发块级格式化上下文
块级格式化上下文，它是一个独立的渲染区域，这个区域与外部毫不相干。
触发条件：
根元素（例如：html）
元素浮动了（float 不为 none）
position 为 absolute 或 fixed
display 为 inline-block、table-sell、flex…
overflow 不为 visible
设置容器元素伪元素进行清理（推荐的清理浮动方法）
推荐学习：《前端视频》
热心网友
时间：2022-04-06 09:04
清除元素浮动有多种方法，通常会使用到clear属性。
如果是清除浮动元素对兄弟级元素的影响，则在浮动元素之后的第一个兄弟级元素上设置clear属性即可。
如果是清除浮动元素对父级元素的影响，则有多种方法，比较常见的方式有两种，一种是在父级元素当中添加一个空标签，然后为空标签设置clear: both; ；另一种方法是为父级元素添加伪元素，用伪元素清除浮动，例如：
<style>.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.main:after {
clear:both;
display:block;
height:0;
content:"\200B";
}
.main {
*zoom:1;
}
</style>
</head>
<body>
<div class="main">
<div>言成科技</div>
<div>合作伙伴</div>
<div>HTML5学堂（码匠）</div>
</div>
更多清除浮动的方法，可以查看文章《如何清除元素的浮动》
热心网友
时间：2022-04-06 10:22
