css clear清除浮动属性笔记

原创 国哥笔记  2017-12-18 19:50  阅读 1,580 views 次

clear属性定义及用法

在css中,clear属性是用来清除浮动,就是把元素的左侧或右侧的浮动元素看作没有浮动的块状元素来处理;

clear属性值

  • none:允许浮动元素出现在两侧(默认);
  • left:左侧不允许浮动元素;
  • right :右侧不允许浮动元素;
  • both :左右两侧均不允许浮动元素;
  • inherit 规定应该从父元素继承 clear 属性的值。

语法格式:

clear:none/left/right/both/inherit;

实例1(清除浮动):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css clear清除浮动属性笔记</title>
<style>
img{float:left;}
p{border:1px solid red;}
#clear{clear:both;}
</style>
<head/>
<body>
<div>
<img src="https://www.ggbiji.com/wp-content/themes/Nana3.18/images/logo.png" width="300" height="70" />
<p>该元素没有使用clear属性清除浮动</p>
<p id="clear">该元素使用clear属性清除浮动</p>
</div>
</body>
</html>

运行结果:

css clear清除浮动属性笔记

说明:浮动的元素不会占据空间,下一个元素在布局时会当左右的浮动元素不存在,与浮动元素重合。使用clear属性清除浮动之后,元素在布局时会把左或右的浮动元素看着普通的块状元素来处理,不会与浮动元素重合。

注意:在这里的清除浮动并不是清除元素的浮动布局,不会影响元素的浮动布局视觉效果,而是让元素在布局时把左或右的浮动元素看着普通的块状元素来处理。

实例2(清除左浮动):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用clear属性清除左浮动</title>
<style>
#clear{width:400px;height:200px;}
#floatL{width:80px;height:100px;float:left;background:#888;}
#floatR{width:80px;height:150px;float:right;background:#789;}
#clearL{clear:left;}
</style>
<head/>
<body>
<div id="clear">
<div id="floatL">左浮动元素</div>
<div id="floatR">右浮动元素</div>
<div id="clearL">使用clear属性清除左浮动</div>
</div>
</body>
</html>

运行结果:

使用clear属性清除左浮动

实例2(清除右浮动):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用clear属性清除右浮动</title>
<style>
#clear{width:400px;height:200px;}
#floatL{width:80px;height:150px;float:left;background:#888;}
#floatR{width:80px;height:100px;float:right;background:#789;}
#clearL{clear:right;}
</style>
<head/>
<body>
<div id="clear">
<div id="floatL">左浮动元素</div>
<div id="floatR">右浮动元素</div>
<div id="clearL">使用clear属性清除左浮动</div>
</div>
</body>
</html>

运行结果:

使用clear属性清除右浮动

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-clear.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情