北京做电子系统网站的公司中牟网络推广外包
css浮动及清除浮动副作用的三种解决方法
文章目录
- css浮动及清除浮动副作用的三种解决方法
- 一、浮动定义
- 二、浮动元素设置
- 三、清除浮动副作用方法一
- 四、清除浮动副作用方法二
- 五、清除浮动副作用方法三
一、浮动定义
浮动（Float）是CSS中一种布局技术，用于使元素沿其容器的左侧或右侧浮动，并允许文本和内联元素围绕它。浮动的常见应用是在创建多列布局或在文本中插入图片时。
理解：浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。
二、浮动元素设置
1、使用 float 属性可以将元素向左或向右浮动。例如，float: left; 将使元素向左浮动，允许其他内容环绕其右侧。
.myclass1{width: 50%;float: left;}
2、浮动的副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。
3、浮动的清除： 当一个元素浮动后，其父元素的高度将不再自动扩展以适应浮动元素的高度。这时需要清除浮动 。
理解：想将盒子向左或右排列，就需要使用浮动，但浮动会导致父级元素被撑开管不住子级元素，就需要方法清除这个副作用。
三、清除浮动副作用方法一
对父级元素设置适合CSS高度
这里使用类选择器选中父级div,用id选择器选择两个子级div，并分别增加样式，最后给子级div增加向左浮动样式。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.Myclass{border: blue 3px solid;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}</style></head><body><div class="Myclass"><div id="box01"></div><div id="box02"></div></div></body>
</html>浮动副作用如图所示：
解决方法：对父级元素设置适合高度样式清除浮动， 这里对父级div设置一定高度即可，父级div需要大于子级div的高度即可，这里我们知道内容高度是50PX+上下边框为2px，这样具体父级高度为52px
.Myclass{height: 52px;border: blue 3px solid;}
效果如图：
四、清除浮动副作用方法二
使用clear:both清除浮动副作用
同上，分别给父级div和子级div增加样式，并给子级div增加向左浮动样式。
解决方法：添加空盒子
在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div一个clear：both就可清除浮动副作用。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.Myclass{border: blue 3px solid;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}.clear{clear: both;}</style></head><body><div class="Myclass"><div id="box01"></div><div id="box02"></div><!--这里加一个空盒子用于清除浮动--><div class="clear"></div></div></body>
</html>效果如图：
五、清除浮动副作用方法三
给父级div定义 overflow:hidden
同上，分别给父级div和子级div增加样式，并给子级div增加向左浮动样式。
解决方法： 对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.Myclass{border: blue 3px solid;overflow: hidden;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}</style></head><body><div class="Myclass"><div id="box01"></div><div id="box02"></div></div></body>
</html>效果如图：
