专题三、清除浮动的几种方法
专题三、清除浮动的几种方法
一、清除浮动原因:
当容器内有浮动元素或者都是浮动元素,导致不能撑起容器的高度,使得内容溢出到容器的外面而影响布局(浮动溢出)。
二、清除浮动常用方法
-
使用clear属性的空元素
<style> .box{ background-color: gray; } .box1,.box2{ background-color: red; width: 300px; height: 300px; float: left; } .box2{ height: 100px; background-color: blue; float: right; } .box3{ clear: both; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body>
-
使用CSS的overflow属性
<style> .box{ background-color: gray; overflow: hidden; /*或者auto*/ } .box1,.box2{ background-color: red; width: 300px; height: 300px; float: left; } .box2{ height: 100px; background-color: blue; float: right; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div>
-
利用伪元素在后边增加一个空格‘020’,并给它赋予clear属性
<style> .box{ background-color: gray; /*overflow: hidden;*/ } .box1,.box2{ background-color: red; width: 300px; height: 300px; float: left; } .box2{ height: 100px; background-color: blue; float: right; } .clearfix:after{ content: "020"; display: block; clear: both; } .clearfix { /* 触发 hasLayout */ zoom: 1; } </style> </head> <body> <div class="box clearfix"> <div class="box1"></div> <div class="box2"></div> </div>