CSS浮动(清除浮动）

最新推荐文章于 2024-06-18 20:30:59 发布

你好y

最新推荐文章于 2024-06-18 20:30:59 发布

阅读量239

点赞数 1

分类专栏：前端基础知识文章标签： css

本文链接：https://blog.csdn.net/qq_43430343/article/details/104265600

版权

前端基础知识专栏收录该内容

15 篇文章 1 订阅

订阅专栏

CSS浮动

css有三种机制来设置盒子的摆放位置，分别为普通流，浮动和定位

普通流：

1.块状元素独自占一行，从上而下排序。
常见元素：div, hr, p, h1-h6, ul, ol, dl, form, table
2.行内元素从左到右排序
常见元素：span,a,i,em 等

浮动：

1.让多个块级盒子在一行显示
2.实现盒子的左右对齐
3.控制图片，实现文字环绕图片的效果

定位：将盒子定在浏览器的某一个位置

浮动语法:

选择器{
float：属性；     //有none，left,right 可选择
}

浮动的相关性质:

块状里面有浮动的属性，它可以浮动在标准流上面，即压着标准流
浮动的盒子不再占距位置，标准流会取代它的位置
浮动特性可以转换元素display属性，转化为类似与行内块，但元素之间没有空隙

浮动元素与父盒子的关系

1.子盒子的浮动参照父盒子的对齐
2.其不会超过父盒子的边框，也不会超过父盒子的内边距,顶多紧挨其内边框

浮动元素与兄弟盒子的关系

1.当A盒子浮动，B盒子为标准流时，B盒子会到A盒子的位置
2.当A盒子为标准流，B盒子浮动时，B盒子不会影响A盒子的位置，即仍处于原位置

情况一：在这里插入图片描述
即浮动元素不会影响其前面的标准流，并且浮动的盒子不占据位置

用子类撑开父类盒子，父类不加宽高，加上浮动，子类设置宽高

清除浮动

很多时候父盒子是不方便给高度的，在父和子都为标准流的情况下，父盒子的高度会随着子盒子的高度的变化而变化，但如果子盒子是浮动的呢？? 这时就需要清除浮动了。

清除浮动用于因为子盒子浮动而引起父盒子高度为零的问题。
清除浮动后，父级就会根据浮动的子盒子自动检测高度

选择器{
clear:both;
}

清除浮动的方法

1.额外标签法
在浮动盒子最后标签后面加一行标签

例如：<div class=”clear"> < /div>

2.给父类添加 overflow:hidden;
3. 使用after伪元素清除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*使用after给父类*/
	    .clearfix:after{
	    	content: "";
	    	display: block;
	    	height: 0;
	    	visibility: hidden;
	    	clear: both;
	    }
	    .clearfix{
	    	*zoom:1;  /*ie6,7专用清除浮动的样式*/
	    }
		.one{
			width: 400px;
			border: 1px solid #123;
			/*给父类加overflow*/
			/*overflow: hidden;*/

		}
		.dd{
			float: left;
			width: 200px;
			height: 200px;
			background-color: skyblue;
		}
		.ss{
			float: left;
			width: 200px;
			height: 400px;
			background-color: purple;
		}
		.two{
			float: left;
			width: 500px;
			height: 200px;
			background-color: orange;
		}
		/*使用额外标签法*/
		/*.clear{
			clear: both;
		}*/
	</style>
</head>
<body>
	<div class="one clearfix">
		<div class="dd"></div>
		<div class="ss"></div>
		<!-- <div class="clear"></div> -->
	</div>
	<div class="two"></div>
</body>
</html>

4.添加双伪元素清除浮动

        .clearfix:before,
	    .clearfix:after{
	    	content: "";
	    	display: table;
	    }
	    .clearfix{
	    	*zoom:1;  /*ie6,7专用清除浮动的样式*/
	    }
	    .clearfix:after{
	    	clear: both;
	    }