CSS清除浮动
CSS清楚浮动方法
1.给父级一个height属性
<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>
原理：父级手动定义一个高度，就解决了父级div无法自动获取到高度的问题
优点：简单，代码量少。
缺点：只适合高度固定布局，要给出精确高度。
2.结尾加一个空div标签，给空div clear：both属性
<style type="text/css"> .div1{background:#000080;border:1px solid red} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} /*清除浮动代码*/ .div{clear:both} --*清楚浮动用的空div*-- </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="div"></div> </div> <div class="div2"> div2 </div>
原理：前加一个空的div，利用clear：both清除浮动
有点：简单，代码量少，浏览器支持好
缺点：不容易理解，不利于布局
3.给父级定义一个伪类：after
<style> .div1{ border: 1px solid red; background-color: green; } /*清除浮动代码相当于给div1加一个空div*/ .div1:after{ content:""; clear: both; display: block; } .left{ width: 20%; height: 200px; float:left; background-color: red; } .right{ width: 30%; height: 100px; float: right; background-color: skyblue; } .div2{ background-color: black; border:1px solid yellow ; } </style> </head> <body> <div class="div1"> <div class="left"></div> <div class="right"></div> <!--div1:after相当于在这加一个空的div--> </div> <div class="div2"></div> </body>
原理：相当于给父级加一个子级（空的div，给clear：both属性，并且content必须有，尽管内容为空也得写）
优点：浏览器支持行好，不容易出现怪问题。
缺点：代码多，不容易被初学者理解
4.给父级定义 overflow:hidden
<style> .div1{ border: 1px solid red; background-color: green; /*清除浮动代码*/ overflow: hidden; } .left{ width: 20%; height: 200px; float:left; background-color: red; } .right{ width: 30%; height: 100px; float: right; background-color: skyblue; } .div2{ background-color: black; border:1px solid yellow ; } </style> </head> <body> <div class="div1"> <div class="left"></div> <div class="right"></div> <!--div1:after相当于在这加一个空的div--> </div> <div class="div2"></div> </body>
原理：必须定义宽度，同时不能定义高度，使用over：hidden浏览器自动检测浮动元素的高度
优点：代码量少
缺点：如果子级为定位元素，而且子级宽度大于父级时，多余的内容会被隐藏
5.给父级定义 overflow:auto
<style> .div1{ border: 1px solid red; background-color: green; /*清除浮动代码*/ overflow: auto; } /*子级宽度不能超过父级，不然会出现滚动条*/ .left{ width: 20%; height: 200px; float:left; background-color: red; } .right{ width: 30%; height: 1000px; float: right; background-color: skyblue; } .div2{ background-color: black; border:1px solid yellow ; } </style> </head> <body> <div class="div1"> <div class="left"></div> <div class="right"></div> <!--div1:after相当于在这加一个空的div--> </div> <div class="div2"></div> </body>
原理：必须定义宽度，同时不能定义高度，使用over：auto浏览器自动检测浮动元素的高度
优点：代码量少
缺点：如果子级宽度大于父级时，多余的内容会被隐藏
