CSS中元素浮动的清除

最新推荐文章于 2021-05-31 04:31:32 发布

波哥的技术积累

最新推荐文章于 2021-05-31 04:31:32 发布

阅读量2.5k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/woshisap/article/details/8486456

版权

css 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

在网页中，使用浮动元素的时候，会影响后面相邻的固定元素，由于不同的浏览器对浮动属性的解释存在差异，所以需要对某些元素的浮动属性进行清除，

清除浮动属性时，使用的属性是清除浮动属性(clear).

1. 清除浮动属性(clear)

用来清除相邻元素的浮动属性，在清除浮动属性clear时中，可以使用4种属性值，分别为none, left, right和both，

clear: none | left | right | both;

none: 不清除浮动属性

left: 清除元素的左侧浮动属性

right：清除元素的右侧浮动属性

both：清除元素的两侧浮动属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> CSS属性 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    .float {
	  float: left;
	  width: 200px;
	  height: 100px;
	  background: #666666;
	}
	.clear {
	 clear: left;
	 float: left;
	 width: 200px;
	 height: 100px;
	 background: #999999;
	}
  </style>
 </head>

 <body>
  <div class="float">这是一个浮动元素</div>
  <div class="clear">这是一个清除浮动属性的元素</div>
 </body>
</html>

第二个元素清除了浮动元素的左侧浮动属性，所以两个元素将换行显示。

2.清除浮动与固定元素

当清除浮动元素的右侧浮动属性的时候，由于固定元素在浮动元素的后面时会同行显示，所以无法显示清除浮动的效果，在实际使用浮动清除属性的时候，常常会忽略

这一点，以致造成布局上的困扰。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
     .float {
	   float: left;
	   width: 200px;
	   height: 100px;
	   background: #666666;
	 }
	 .clear {
	  clear: right;
	  float: left;
	  width: 200px;
	  height: 100px;
	  background: #999999;
	 }
  </style>
 </head>

 <body>
  <div class="clear">这是一个清除浮动属性的元素</div>
  <div class="float">这是一个浮动元素</div>
 </body>
</html>

在第二个元素中，定义元素的浮动属性值为左浮动，此时由于右侧元素即使没有浮动属性，依然可以显示在第1个

元素的右侧，所以无法显示清除浮动的效果。

波哥的技术积累

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中元素浮动的清除

在网页中，使用浮动元素的时候，会影响后面相邻的固定元素，由于不同的浏览器对浮动属性的解释存在差异，所以需要对某些元素的浮动属性进行清除，清除浮动属性时，使用的属性是清除浮动属性(clear). 1. 清除浮动属性(clear) 用来清除相邻元素的浮动属性，在清除浮动属性clear时中，可以使用4种属性值，分别为none, left, right和both， clear
复制链接

扫一扫