clear:both的特点
- 元素需是块级元素
- 元素不能带有浮动属性
- 元素必须放在最后一个浮动元素的后面
- 用户是看不到这个元素的
clearfix清浮动方法的属性
浮动元素的父级选择器{*zoom:1;}/*只有ie7可识别 css hack写法*
浮动元素的父级选择器:
after{
display: block
content:"";
clear: both;
height:0;/*如果是在ie低版本浏览器(ie6、7、8)下展示,有时候浏览器会默认
height元素有1px的高度*/
font-size: 0;
overflow: hidden;
visibility: hidden;/*为了防止元素内有内容显示出来*
}
面试题:如何让一个元素消失在视野中
visibility: hidden-盒子看不到,但是盒子所占的大小依然还在 display:none-盒子完全从页面中消失 opacity:0-透明度为0(完全透明) width/height/line-height+ overflow-宽度/高度/行高+溢出隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
控制台:鼠标右键检查(F12)可以发现在元素之前有::before在元素之后有一个::after
*/
.todady::before{
content: "昨天星期一";
color: red;
}
.todady::after{
content: "明天星期三";
color: magenta;
}
</style>
</head>
<body>
<div class="todady">今天星期二</div>
</body>
</html>
转载请注明：大灰牛博客 » clear的值和特点及伪元素before和after的使用