记录--css浮动

wxt_

于 2019-11-27 19:09:57 发布

阅读量169

点赞数 1

文章标签： css浮动

本文链接：https://blog.csdn.net/wxt_wjc/article/details/103281205

版权

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

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

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

解决浮动失去高度的方法： ①给父元素添加一个子元素（块），设置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>

结果如下图:

如果将content:"";注释掉, 会出现下面的样子,也就是没有清除浮动,伪类元素没有起作用.

wxt_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
记录--css浮动

正常文档流:浏览器从上往下 ,从左往右解析文件称为正常文档流 .浮动：使元素脱离正常文档流，让父元素失去高度.浮动影响的是后续摆放的元素，不影响前面的元素. 浮动可以让块(设置浮动会将行内元素转换成块元素)左浮或者右浮即相对它的父元素靠左、靠右。解决浮动失去高度的方法： ①给父元素添加一个子元素（块），设置clear：both；可以清楚浮动，让它有高度,占位置....
复制链接

扫一扫