清除浮动，解决高度塌陷问题

最新推荐文章于 2022-07-21 13:48:01 发布

Taojunhao

最新推荐文章于 2022-07-21 13:48:01 发布

阅读量346

点赞数

分类专栏： CSS 文章标签：解决高度塌陷问题 CSS高度塌陷问题

本文链接：https://blog.youkuaiyun.com/weixin_39994522/article/details/96994203

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

清除浮动，解决高度塌陷问题

一、清除浮动方法

使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

			#div1{
				background: #FFFF00;
				border: 1px solid;
			}
			#div2{
				background: #00FFFF;
				width: 100px;
				height: 100px;
				float: right
			}
			#clear{
				clear: right;
			}

			<body>
				<div id="div1">
					<div id="div2">
						
					</div>
					<div id="clear">
						
					</div>
				</div>
			</body>

使用CSS的overflow属性

给浮动元素的父元素添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

			#div1{
				background: #FFFF00;
				border: 1px solid;
				overflow: auto;
			}
			#div2{
				background: #00FFFF;
				width: 100px;
				height: 100px;
				float: right;
				
			}

			<body>
				<div id="div1">
					<div id="div2">
						
					</div>
				</div>
			</body>

使用CSS的:after伪元素

结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

			#div1{
				background: #FFFF00;
				border: 1px solid;
				
			}
			#div2{
				background: #00FFFF;
				width: 100px;
				height: 100px;
				float: right;
				
			}
			#div1:after{
				content: '';
				display: block;
				clear: both;
			}

			<body>
				<div id="div1">
					<div id="div2">
						
					</div>
				</div>
			</body>