<head>
<meta charset="UTF-8">
<title>浮动理解</title>
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*width: 500px;overflow: auto;*/ }
/*.clearfloat:after{ content: ''; display: block; visibility: hidden; clear: both; }*/
.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}
/*清除浮动代码,加入空元素 */
/*.clearfloat1{clear:both} */
</style>
</head>
<body>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
<!-- <div class="clearfloat1"></div> -->
</div>
<div class="div2">
div2
</div>
</body>
排版清除浮动(不在普通文档流,不占据空间,同级元素也会浮动,所以要清楚同级元素的浮动):
1.浮动时,父元素无法获取高度height:0;所以直接给父元素一个固定高度;(不建议)
2.在结尾处加入div空标签, div{clear:both;},让父元素能获取高度(不建议)或是
br{clear:both;}
3.在父元素中运用伪类:after
.parentDiv:afer{content:’’;display:block;visibility:hidden;clear:both;}
(建议)
4.父元素定义了宽度或是zoom:1(解决IE浮动),而且高度不能定义,加入overflow:hidden;父元素可以自行去检查浮动的高度,但是不能和position一起用;(同样overfloat:auto;也是同等条件,但是会出现滚动条)
5.让父元素浮动,但是又会出现浮动,那么在父元素的下一个同级元素clear:both;
代码可自行清除注释查看效果