浮动的相关分析和注意事项和清除浮动的四种方法

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

一麻袋小猫

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

阅读量353

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/Zmongo/article/details/104097856

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*div添加浮动之后，默认转换为inline-block*/
	div {
		float: left;
		height: 100px;
		background-color: yellow;
	}
	</style>
</head>
<body>
	<div>今天是周二</div>
</body>
</html>

1.div 的 display 会类似转换为行内块，但中间没有行内块默认的缝隙，和真正的行内块有区别。
2.浮动的目的是让多个块级元素在同一行显示，但是如果父元素一行放不下就会跑到第二行。
3.浮动不占有原来的位置。
4. 有趣的是，浮动是脱标的，会影响下面的标准流元素的位置，此时给需要浮动得到元素一个标准流的父元素，这样，就最大化的减少了对其他标准流的影响。这里所谓的标准流的父元素就是用标准流的元素把浮动的框起来，免得到处跑或者下面的跑上面来。
5. 盒子布局用float更方便些
6. 做案例时突然总结出来，float 既然能把盒子转换成类似 inline-block，那么在布局盒子时尽量使用float。但对于行内模式float无法有inline-block的效果，所以对于行内模式，并且需要改变宽高就用inline-block。也不知道对不对，后续试验再进行验证。
7. 子盒子的浮动不会与父盒子的边框重叠，也不会以超过父盒子的内边距。永远不会压住边框和内边距。
8. 兄弟盒子两个都浮动则并排放;如果第一个盒子标准流，第二个盒子浮动，则竖着显示，因为标准流很霸道谁也别想上来。浮动元素只会影响当前或者后面的盒子，不会影响前面的标准流。布局若是一行则float，若是一列则标准流。
9. 浮动：让多个块级元素一行内显示。
10.清除浮动：很多情况下父亲不方便给高度，自动撑开父亲最为合理。清除浮动之后，父亲自动检测孩子高度。
11。清除浮动方法：1 额外标签法 2 给父亲添加overflown:hidden; 有局限性，溢出隐藏 3 **after伪元素清除浮动，利用CSS在结构里面生成一个新标签但结构没有改变，这种方法是最为流行的写法。

清除浮动的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*声明清除浮动的样式*/
	/*.clearfix:after {
		content: "";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
	.clearfix {
		*zoom:1;*/
		 /*ie6,ie7专门清除浮动的样式*/
	/*}*/
	/*在父亲里要调用*/

			/*双伪元素*/
    .clearfix:before,
    .clearfix:after {
    	content: "";
    	display: table;
    }
    .clearfix:after {
    	clear: both;
    }
    .clearfix {
    	*zoom:1;
    }



	    .box {
	    	border: 1px solid red;
	    	/*给父亲添加overflown*/
	    	overflow: hidden;
	   }
		.damao {
			float: left;
			width: 100px;
			height: 100px;
			background-color: #000;
		}
		.ermao {
			float: left;
			width: 200px;
			height: 200px;
			background-color: yellow;
		}
		.box2 {
			height: 50px;
			background-color: pink;
		}
		/*.clear {
			clear :both;
		}    额外标签法
	</style>
</head>
<body>
	<div class="box clearfix">
		<div class="damao"></div>
		<div class="ermao"></div>
		<!-- 第一种清除浮动方法 ;额外标签法-->
		<!-- <div class="clear"></div> -->
	</div>
	<div class="box2"></div>
</body>
</html>