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

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

orangecloudy

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

阅读量397

点赞数

本文链接：https://blog.csdn.net/orangecloudy/article/details/83552561

版权

《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以下版本所识别 */
		}

orangecloudy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
392day（额外标签法和overflow清除浮动，伪元素清除浮动）

《2018年10月31日》【连续392天】标题：额外标签法和overflow清除浮动，伪元素清除浮动；内容：&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; * { margin: 0px;
复制链接

扫一扫