清除浮动常用的三种方法

最新推荐文章于 2023-04-04 19:13:57 发布

笑看云卷云舒，坐观云起云落

最新推荐文章于 2023-04-04 19:13:57 发布

阅读量442

点赞数 1

本文链接：https://blog.csdn.net/weixin_44580880/article/details/88418493

版权

1.在浮动元素之后添加一个空的div标签，设置clear:both

   在浮动元素之后添加一个空的div,并设置该div的宽度和高度为0,clear为both,
       清除浮动,此时浮动元素回到正常文档流,且会占据正常文档流的位置,它之后的div
       会依次排列在后面

<style type="text/css">
		
		
			/*在浮动元素之后添加一个空的div,并设置该div的宽度和高度为0,clear为both,
		清除浮动,此时浮动元素回到正常文档流,且会占据正常文档流的位置,它之后的div
		会依次排列在后面*/
		
	
			
			.box {
				width: 500px;
				background-color: pink;
				
			}
			
			
			.left {
				width: 200px;
				height: 80px;
				background: red;
				float: left;
			}
			
			.right {
				width: 100px;
				height: 200px;
				background: green;
				float: left;
			}
			
			.right1 {
				width: 0px;
				height: 0px;
				clear: both;
			}
			
			.right2 {
				width: 400px;
				height: 100px;
				background: black;
			}
		</style>
	

	<body>
		<div class="box">
			123
			<div class="left">1</div>
			<div class="right">2</div>
			<div class="right1"></div>
			<div class="right2"></div>
		</div>

	</body>

效果图如下：

清除浮动前：

清除浮动后：

2.给父级元素添加 overflow:hidden属性

给父元素添加overflow:hidden,不给父元素设置高度，清除浮动,
原本浮动的元素会回到正常文档流中,会撑开父元素的高度,
但是它不占据正常文档流位置，下一个元素还是会移动到它下面被覆盖

<style type="text/css">
			/*	给父元素添加overflow:hidden,不给父元素设置高度，清除浮动,
		 * 原本浮动的元素会回到正常文档流中,会撑开父元素的高度,
		 * 但是它不占据正常文档流位置，下一个元素还是会移动到它下面被覆盖*/
		
			
			.box {
				width: 500px;
				background-color: pink;
				overflow: hidden;  
				/*overflow: auto;两者都可以*/
			}
			
			
			.left {
				width: 200px;
				height: 80px;
				background: red;
				float: left;
			}
			
			.right {
				width: 100px;
				height: 200px;
				background: green;
				float: left;
			}
			
			/*.right1 {
				width: 0px;
				height: 0px;
				clear: both;
			}*/
			
			.right2 {
				width: 400px;
				height: 100px;
				background: black;
			}
		</style>
	

	<body>
		<div class="box">
			123
			<div class="left">1</div>
			<div class="right">2</div>
			<div class="right1"></div>
			<div class="right2"></div>
		</div>

	</body>

效果图如下：

清除浮动前：

清除浮动后：

3.给父元素使用伪元素：after清除浮动

给父元素设置宽,之后再给父元素添加伪元素:after
       (.box:after或是.box::after两种写法都可以,后者是css3为了区分伪类和伪元素而弄出来的),
       设置display:block;(after伪元素添加的内容默认为行内元素，所以需要设置display:block);
       clear:both来清除浮动,此时浮动元素回到正常文档流中,会撑开父级元素的高度,
       但是不会占据正常文档流的位置,下一个元素还是会移动到它下面被覆盖

<style type="text/css">
			
		/*给父元素设置宽,之后再给父元素添加伪元素:after
		(.box:after或是.box::after两种写法都可以,后者是css3为了区分伪类和伪元素而弄出来的),
		设置display:block;(after伪元素添加的内容默认为行内元素，所以需要设置display:block);
		clear:both来清除浮动,此时浮动元素回到正常文档流中,会撑开父级元素的高度,
		但是不会占据正常文档流的位置,下一个元素还是会移动到它下面被覆盖*/
			
			.box {
				width: 1000px;
				background-color: pink;
			}
			
			.box::after {
				content: " ";
				clear: both;
				display: block;
			}
			
			.left {
				width: 200px;
				height: 200px;
				background: red;
				float: left;
			}
			
			.right {
				width: 100px;
				height: 400px;
				background: green;
				float: left;
			}
			
			
			
			.right2 {
				width: 800px;
				height: 100px;
				background: black;
			}
		</style>


	
	<body>
		<div class="box">
			123
			<div class="left">1</div>
			<div class="right">2</div>
			<div class="right2"></div>
		</div>

	</body>

效果图如下：

清除浮动前：

清除浮动后：

https://segmentfault.com/a/1190000013047380?utm_source=tag-newest

http://www.cnblogs.com/changi/p/5689665.html

笑看云卷云舒，坐观云起云落

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
清除浮动常用的三种方法

1.在浮动元素之后添加一个空的div标签，设置clear:both 在浮动元素之后添加一个空的div,并设置该div的宽度和高度为0,clear为both, 清除浮动,此时浮动元素回到正常文档流,且会占据正常文档流的位置,它之后的div 会依次排列在后面&lt;style type="text/css"&gt; /*在浮动元素之后添...
复制链接

扫一扫