清除浮动的方法

最新推荐文章于 2023-07-20 17:15:10 发布

lancela

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量130

点赞数

本文链接：https://blog.csdn.net/qq_39174924/article/details/97836237

版权

为什么清除浮动
清除子元素的浮动对父元素或兄弟元素的影响

此处是浮动的影响

清除父子之间的浮动

第一种清除父子浮动的方法
在父级元素上加 overflow: hidden;样式

.list{
			width: 210px;
			/*height: 400px;*/
			border:1px solid #000;

			margin: 50px auto 0;
			list-style: none;
			padding: 0;
			/*
			第一种清清除浮动的方法
			overflow: hidden;
			*/

		}

第二种清除父子浮动的方法
在父级元素的最下面追加一空的子元素

<ul class="list clearfix">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<!-- 第二种清除父子浮动的方法 -->
		<!-- <div style="clear:both"></div> -->
	</ul>

清除父子浮动的第三种方式
在父元素上进行以下操作

		//定义了一个伪元素
		.clearfix:after{
			content: "";
			display: table;
			clear:both;
		}
		//加到父元素上
		<ul class="list clearfix">
		<li>1</li>
		<ul>

清除兄弟之间的浮动
在浮动元素的下一个元素上设置 clear: both;样式

		.one{
			background-color: coral;
			float:left;
			
		}
		.two{
			background-color: teal;
			clear: both;

		}
		.three{
			/*float: left;*/
			background-color: pink;
			/*margin-top: 100px;*/
			/*清除浮动 清除兄弟元素的浮动*/
			clear: both;
		}
		<body>
			<div class="one">one</div>
			<div class="two">two</div>
			<div class="three">three</div>
		</body>

在这里插入图片描述