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浏览器自动检测浮动元素的高度
优点:代码量少
缺点:如果子级宽度大于父级时,多余的内容会被隐藏
原标题:CSS清楚浮动
关键词:CSS