清除浮动

最新推荐文章于 2025-06-02 17:01:47 发布

aline2013

最新推荐文章于 2025-06-02 17:01:47 发布

阅读量310

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/aline2013/article/details/51003734

html 专栏收录该内容

2 篇文章

订阅专栏

<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;

代码可自行清除注释查看效果