10、浮动和清除浮动影响

最新推荐文章于 2023-12-13 19:55:41 发布

Learn 学一点

最新推荐文章于 2023-12-13 19:55:41 发布

阅读量120

点赞数

分类专栏：第三册：HTML+CSS 文章标签： css html js

本文链接：https://blog.csdn.net/baidu_38285825/article/details/111572361

版权

第三册：HTML+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

2.12 浮动和清除浮动影响

Float（浮动）属性：
1、改变块元素（block element）对象的默认显示方式。
2、浮动元素（float）会被移出标准流，但是没有脱离文件流。
3、float开始之初是为了实现文本环绕。将块显示标记左右排列的时候使用浮动属性。

<style>
#aa,#bb,#cc{
		width:100px;
		height:100px;
		background-color:#FF0000;
		float:left;/*当全部左浮动时，三个盒子就排成一排了*/
}
#bb{
		background-color:#0000CC;
}
#cc{
		background-color:#00FF00;
}
</style>

Clear属性：
#cc{
		width:400px;
		height:200px;
		background-color:#9966FF;
		float:left;
		clear:left;
		/*清除左浮动的影响，如果不清除将会影响布局*/
}

*多学一招：clear是清除浮动，但是在清除浮动的时候清除了边界属性，使用了clear属性的盒子无法使用margin属性。如果想在两个盒子之间留一段距离且下一个盒子要清除浮动效果，解决方式如下：

<style type="text/css">
#aa{
	width:200px;
	height:200px;
	background-color:#0000FF;
	float:left;
}
#bb{
	width:200px;
	height:200px;
	background-color:#FF0000;
	float:left;
}
#cc{
	width:400px;
	height:200px;
	background-color:#9966FF;margin-top:10px;
	/*	float:left;    clear:left;清除左浮动的影响，如果不清除将会影响布局*/
	/*如果上面用了clear属性清除左浮动，那么其他属性将会一起被清除，想要两个盒子之间有一段距离margin-top:10px;这段代码将会不起作用*/
}
.clear{
	clear:both;/*不管是左浮动还是右浮动，都清除*/
}
</style>
</head>
<body>
    <div id="aa">aa</div>
    <div id="bb">bb</div>
    <div class="clear"></div><!-->传统解决方式在两个盒子之间加一个带clear属性的空盒子<-->
    <div id="cc">cc</div>
</body>