Rumah > Artikel > hujung hadapan web > 关于css中clear元素的深入了解
关于css中clear元素的深入了解
- 高洛峰asal
- 2017-03-17 10:34:001763semak imbas
clear：left;表示左侧不能有浮动元素。
clear：right;表示右侧不能有浮动元素。
clear：both;表示左右两侧都不能有浮动元素。
但在使用时，还得考虑css优先级问题。相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高 。
当所有元素的clear属性都设为right时，由于优先级的原因，并不是所想的那样：右侧没有浮动元素，而是右侧出现了浮动元素。
比如下面的代码：
<html>
<head>
<style type="text/css">
.p1{height:40px;width:40px;background-color:red;position:releative;float:left;clear:right;
}.p2{height:40px;width:40px;background-color:green;position:relative;float:left;clear:right;
}.p3{height:40px;width:40px;background-color:yellow;position:relative;float:left;clear:right;
}.p4{height:40px;width:40px;background-color:black;position:relative;float:left;clear:right;
}.p5{height:40px;width:40px;background-color:blue;position:relative;float:left;clear:right;
}</style>
</head>
<body>
<p class="p1">
</p>
<p class="p2">
</p>
<p class="p3">
</p>
<p class="p4">
</p>
<p class="p5">
</p>
</body>
</html>
clear-right
其中：class优先级关系： p5>p4>p3>p2>p1
所以，呈现出下图情况：
当所有元素的clear属性都设为left时，由于优先级的原因，并不是所想的那样：右侧可以有浮动元素，而是右侧不能出现浮动元素。
比如下面的代码：
<html>
<head>
<style type="text/css">
.p1{height:40px;width:40px;background-color:red;position:releative;float:left;clear:left;
}.p2{height:40px;width:40px;background-color:green;position:relative;float:left;clear:left;
}.p3{height:40px;width:40px;background-color:yellow;position:relative;float:left;clear:left;
}.p4{height:40px;width:40px;background-color:black;position:relative;float:left;clear:left;
}.p5{height:40px;width:40px;background-color:blue;position:relative;float:left;clear:left;
}</style>
</head>
<body>
<p class="p1">
</p>
<p class="p2">
</p>
<p class="p3">
</p>
<p class="p4">
</p>
<p class="p5">
</p>
</body>
</html>
clear-left
其中：class优先级关系： p5>p4>p3>p2>p1 。
所以，呈现出下图情况：
我有时偶尔还是会绕晕。。反正，了解了css优先级问题，就容易理解了。
Atas ialah kandungan terperinci 关于css中clear元素的深入了解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用less(变量,混合,匹配,运算,嵌套)的方法介绍 Artikel seterusnya：深入了解CSS级联和继承的使用