392day（额外标签法和overflow清除浮动，伪元素清除浮动）

最新推荐文章于 2024-07-17 09:05:07 发布

原创最新推荐文章于 2024-07-17 09:05:07 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了在前端开发中解决浮动元素导致的布局问题的方法，包括使用额外标签法和伪元素法进行浮动清除，确保父级元素正确包裹其浮动的子元素。

《2018年10月31日》【连续392天】

标题：额外标签法和overflow清除浮动，伪元素清除浮动；
内容：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		
		.clearfix:after { /*正常浏览器 清除浮动*/
			content:"";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}

		.clearfix {
			*zoom: 1; /*  zoom 1 就是ie6 清除浮动方式 * ie7以下版本所识别 */
		}

		.father {
			width: 400px;
			border: 1px solid red;
			/*overflow: hidden;*/
		}

		.big {
			width: 100px;
			height: 100px;
			background-color: skyblue;
			float: left;
		}

		.small {
			width: 80px;
			height: 80px;
			background-color: yellow;
			float: right;
		}

		.footer {
			width: 400px;
			height: 100px;
			background-color: pink;
		}
		/*额外标签法：clear:left/right/both*/
		/*.clear {
			clear: both;
		}*/


	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="big"></div>
		<div class="small"></div>
		<!-- <div class="clear"></div> -->
	</div>
	<div class="footer">
	</div>
</body>

/*双伪元素*/
		.clearfix:before,
		.clearfix:after { /*正常浏览器 清除浮动*/
			content:"";
			display: table;
		}

		.clearfix:after {
			clear: both;
		}

		.clearfix {
			*zoom: 1; /*  zoom 1 就是ie6 清除浮动方式 * ie7以下版本所识别 */
		}