记录--css浮动

最新推荐文章于 2025-01-13 21:56:59 发布

原创最新推荐文章于 2025-01-13 21:56:59 发布 · 224 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css浮动

正常文档流:浏览器从上往下 ,从左往右解析文件称为正常文档流 .

浮动：使元素脱离正常文档流，让父元素失去高度.浮动影响的是后续摆放的元素，不影响前面的元素.

浮动可以让块(设置浮动会将行内元素转换成块元素)左浮或者右浮即相对它的父元素靠左、靠右。

解决浮动失去高度的方法： ①给父元素添加一个子元素（块），设置clear：both；可以清楚浮动，让它有高度,占位置.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>css浮动</title>
  <style>
	.parent{
		width: 300px;
	}
	.parent .son{
		width: 100px;
		height: 100px;
	}
	.parent .son.r{
		background-color: red;
	}
	.parent .son.b{
		background-color: blue;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.clear{
		display: block;
		clear: both;
	}
	.next{
		width: 300px;
		height: 100px;
		background-color: skyblue;
	}
  </style>
 </head>
 <body>
	<div class="parent">
		<div class="son r fl">red</div>  <!--fl,fr分别设置左右浮动-->
		<div class="son b fr">blue</div>
		<span class="clear"></span>    <!--给父元素添加一个子元素-->
	</div>
	<div class="next">1</div>

 </body>
</html>

解决浮动失去高度的方法： ②利用父元素的伪类元素清除浮动（::after）

比如上面的例子，可以加上下面代码:

.parent::after{
		content: "";  /*开启伪类元素的条件，必不可少*/
		display: block;
		clear: both;
	}

content: ""; 是开启伪类元素的条件,没有实际意义,但是如果加上这个属性,将不能开启这个伪类.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>利用伪类元素清除浮动</title>
  <style>
	ul{
		list-style: none;
		padding: 0;
		margin: 0;
		background-color: #f8f8f8;
	}
	ul li{
		float: left;
		padding: 5px 15px;
		margin: 0;
		background-color: red;
	}

	/* 利用伪类元素清楚浮动 */
	.clearfix::after{
		content: "";  /*开启伪类元素的条件，必不可少*/
		display: block;
		clear: both;
	}
    .test{
        height: 100px;
        background-color: pink;
    }
  </style>
 </head>
 <body>
	<ul class="clearfix">
		<li>网站导航</li>
		<li>网站导航</li>
		<li>网站导航</li>
		<li>网站导航</li>
		<li>网站导航</li>
	</ul>
    <div class="test"></div>
 </body>
</html>

结果如下图: