CSS清除浮动问题

• 浮动问题
• 解决方法
• • 方法1
  • 方法2
  • 方法3
  • 方法4

---

浮动问题

给一个盒子使用CSS的flloat浮动属性，导致其父元素盒子高度坍塌，不能被撑开

<div class="parent">
    <div class="son"></div>
    <div class="son"></div>
</div> 

<style type="text/css">
	.parent{
		border: red solid 2px;
		width: 200px;
	}
	.son{
		border: blue solid 2px;
		width: 50px;
		height: 50px;
		float: left;   /*float: right;也一样*/
		margin: 0 5px;
	}
</style>

---

解决方法

方法1

给父级元素设定盒子高度height

<div class="parent">
    <div class="son"></div>
    <div class="son"></div>
</div> 

<style type="text/css">
	.parent{
		border: red solid 2px;
		width: 200px;
		height: 100px;
	}
	.son{
		border: blue solid 2px;
		width: 50px;
		height: 50px;
		float: left;   /*float: right;也一样*/
		margin: 0 5px;
	}
</style>

方法2

新建一个div，给其CSS样式加上clear: both;属性，并在父级元素结束前引入

<div class="parent">
    <div class="son"></div>
    <div class="son"></div>
    <div style=""></div>
</div> 

<style type="text/css">
	.parent{
		border: red solid 2px;
		width: 200px;	
	}
	.son{
		border: blue solid 2px;
		width: 50px;
		height: 50px;
		float: left;   /*float: right;也一样*/
		margin: 0 5px;
	}
	.clear{
		clear: both;
		border: black solid 2px;
	}
</style>

• clear属性
  该属性的值指出了不允许有浮动对象的边情况
  • 参数值说明
    • none：允许两边都可以有浮动对象
    • both：不允许有浮动对象
    • left：不允许左边有浮动对象
    • right：不允许右边有浮动对象

方法3

给父级元素CSS样式加上overflow:hidden，浏览器会自动检查浮动区域的高度

<div class="parent">
    <div class="son"></div>
    <div class="son"></div>
</div> 

<style type="text/css">
	.parent{
		border: red solid 2px;
		width: 200px;
		overflow: hidden;	
	}
	.son{
		border: blue solid 2px;
		width: 50px;
		height: 50px;
		float: left;   /*float: right;也一样*/
		margin: 0 5px;
	}
</style>

方法4

给父级元素定义定义伪类:after和zoom属性

<div class="parent clear">
    <div class="son"></div>
    <div class="son"></div>
</div> 

<style type="text/css">
	.parent{
		border: red solid 2px;
		width: 200px;
	}
	.son{
		border: blue solid 2px;
		width: 50px;
		height: 50px;
		float: left;   /*float: right;也一样*/
		margin: 0 5px;
	}
	.clear{  /*解决ie6,ie7浮动问题*/
		zoom:1;
		}
    .clear:after{  /*三者缺一不可*/
      display:block;
      clear:both;
      content:"";
    }
</style>

---

参考：
① http://www.divcss5.com/jiqiao/j406.shtml
② https://blog.csdn.net/b954960630/article/details/79576080