CSS的浮动与清除浮动

最新推荐文章于 2024-09-30 23:36:44 发布

前端小芙

最新推荐文章于 2024-09-30 23:36:44 发布

阅读量77

点赞数

分类专栏： H5+C3 文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_45723378/article/details/124181047

版权

H5+C3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS浮动——Float

设置浮动

使元素脱离文档流超一个方向浮动排列，遇到父级边界换行

作用
浮动可以用来解决水平布局问题。
除此之外还可以使用行标签和行块标签来解决水平布局问题。

属性值	意义
left	向左浮动
right	向右浮动
none	不设置浮动
inherit	继承父级

特性
1. 所有标签同排显示
2. 行标签使用浮动后，支持所有CSS样式
3. 默认内容撑开宽高
4. 元素脱离文档流
5. 换行不被解析
6. 浮动后两者之间的上下边距为相加，而不是取最大值

代码解释：

	<style>
		*{
			padding: 0;
			margin: 0;
		}
		
		.d1{
			width: 100px;
			height: 100px;
			background-color: tomato;
		}
		.d2{
			width: 100px;
			height: 100px;
			background-color: rebeccapurple;
		}
		.d3{
			width: 100px;
			height: 100px;
			background-color: plum;
		}
	</style>
	<body>
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
	</body>

此时，div作为块标签独占一行

代码解释：

div{
	float: left;
}

当在样式表中为div添加float，就会实现水平排列：

清除浮动

原因：元素使用浮动后脱离文档流，父级元素检测不到子级元素的存在，导致高度无法撑开

代码解释：

#first{
			background-color: gold;
			/* overflow: hidden; */
			/* height: 200px; */
		}
		#first div{
			width: 50px;
			height: 50px;
			background-color: rgb(173, 92, 205);
			float: left;
		}
		#second{
			width: 200px;
			height: 200px;
			background-color: indianred;
}

<div id="first">
		 <div>1</div>
		 <div>2</div>
		 <!-- <section style="clear: both;"></section> -->
	 </div>
	 <div id="second">

这样子级标签1和2的父级元素由于子级的浮动，检测不到从而无法显示，second标签由于first的消失上移：

方法

在父级使用height,缺点是拓展性不好，如果我的内容增加，高度无法实时改变
在父级使用overflew:hidden;
使用clear属性，属性值有left/right/both
清除浮动后效果：

浮动练习

代码：

	<style>
		* {
			padding: 0;
			margin: 0;
			text-align: center;
		}

		#top {
			width: 500px;
			height: 100px;
		}

		#top div {
			width: 100px;
			height: 100px;
			background-color: green;
			float: left;
			line-height: 100px;
		}

		#cen {
			width: 500px;
			height: 350px;
			background-color: rgb(248, 17, 210);
		}
		#cen #left{
			width: 300px;
			height: 350px;
			background-color: blueviolet;
			float: left;
		}

		#d6 {
			width: 300px;
			height: 100px;
			line-height: 100px;
			background-color: yellow;
			float: left;
		}
		#d8 {
			width: 150px;
			height: 150px;
			line-height: 150px;
			background-color: rgb(168, 168, 160);
			float: left;
		}
		#d9 {
			color: white;
			width: 150px;
			height: 150px;
			line-height: 150px;
			background-color: black;
			float: left;
		}
		#d11 {
			width: 300px;
			height: 100px;
			line-height: 100px;
			background-color: red;
			float: left;
		}

		#cen #right{
			width: 200px;
			height: 350px;
			background-color: rgb(240, 180, 17);
			float: right;
		}

		#d7 {
			width: 200px;
			height: 200px;
			line-height: 150px;
			background-color: pink;
		}
		#d10 {
			width: 200px;
			height: 150px;
			line-height: 150px;
			background-color: skyblue;
		}

		#d12 {
			width: 500px;
			height: 100px;
			line-height: 100px;
			background-color: blue;
		}
	</style>


<body>
	<div id="top">
		<div id="d1">1</div>
		<div id="d2">2</div>
		<div id="d3">3</div>
		<div id="d4">4</div>
		<div id="d5">5</div>
	</div>

	<div id="cen">
		<div id="left">
			<div id="d6">6</div>
			<div id="d8">8</div>
			<div id="d9">9</div>
			<div id="d11">11</div>
		</div>
		<div id="right">
			<div id="d7">7</div>
			<div id="d10">10</div>
		</div>
	</div>

	<div id="d12">12</div>
	<!-- <section style="clear: left;"></section> -->


</body>