摘要：网页布局中经常会用到浮动，但是浮动的块级元素脱离了标准文档流，使得浮动元素的父元素没有高度，导致父级元素没有高度，所以需要清除浮动对父级元素的影响，本文介绍清除浮动的几种方法。
网页布局中经常会用到float浮动，但是浮动的块级元素脱离了标准文档流，使得浮动元素的父元素没有高度，导致父级元素没有高度，所以需要清除浮动对父级元素的影响，本文介绍清除浮动的几种方法。
清除浮动影响的几种方法:
给父级元素设置高度
效果图：
代码：
外墙法：使用一个空白块级元素上添加css样式clear清除浮动
注意：添加了clear样式的块级元素添加不了margin外边距属性
效果图：
代码：
主要内容
内墙法：使用一个空白块级元素上添加css样式clear清除浮动
效果图：
代码：
内墙法 相对于外墙法有相对优点：
内墙法设置后，浮动元素的父级元素会被撑开，也就是说有了高度
给浮动元素的父元素添加 overflow:hidden
原意：表示移除隐藏，溢出边框的内容都要隐藏掉
效果图：
代码：
主要内容
原文链接：https://www.mi360.cn/articles/94
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114933.html
...实现了！ img{display: none}; 略图 原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除...
为什么要清除浮动？ 1、影响其他元素定位父盒子高度为0，子盒子全部浮动、定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。 2.背景图片或颜色不能正常显示由于浮动产生，如果对父级设置了CSS背景颜色或CSS...
为什么要清除浮动？ 虽说是清除浮动，其实是清除浮动产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们布局中需要清除浮动的最重要的原因之一。 清除浮动的方法： 父级div定义height 原理：父级div手动定义height...
overflow:hidden 的主要功能有三个： 隐藏溢出 清除浮动 解除坍塌 下面用例子来加深理解： 初始html内容： Document 初始css样式： .container{ background-color: black; } .div1{ background-color: aqua; width: 100px; heigh...
阅读 2318·2021-11-25 09:43
阅读 2080·2021-11-22 09:34
阅读 2340·2021-11-12 10:34
阅读 952·2021-10-20 13:46
阅读 995·2021-02-22 17:16
阅读 1994·2019-08-30 13:21
阅读 346·2019-08-30 11:21
阅读 216·2019-08-30 11:20
