发布：2023/12/7 15:51:00作者：大数据 来源：大数据 浏览次数：485
css或html经常需要清除浮动div可以使用
<div style="clear:both"></div>
但还有另一种办法使用元素的:before或:after来清除爱去
|
1 2 3 4 5 |
.service-list:before,.service-list:after{ content:""; clear:both; display: block; } |
注意：content，clear，display三者缺一不可。
双冒号和单冒号效果相同。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <title>float 4</title> <style type="text/css"> div#div1 { width: 80px; height: 80px; background-color: yellow; float: left; } .clearfix:after { content: " "; font-size:0px; display: block; clear: both; visibility: visible; } div#div2 { width: 100px; height: 80px; background-color: green; /*float: left;*/ } </style> </head> <body> <div class="clearfix"> <div id="div1"></div> </div> <div id="div2"></div> </body> </html> |
伪类:
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */
伪元素（如果想兼容旧浏览器用单冒号:）:
::after
::before
某个div子元素设置浮动,让父div任然有高度的方法，子元素浮动父元素高度自适应。
1.在该div下面加上伪类：
.div:after{
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
2.清除子元素所有浮动，将其均设置为display:inline-block。
3.在子元素中再添加一个空元素，设置其样式为clear:both。
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4