clear的值和特点及伪元素before和after的使用

clear:both的特点

元素需是块级元素
元素不能带有浮动属性
元素必须放在最后一个浮动元素的后面
用户是看不到这个元素的
clearfix清浮动方法的属性
浮动元素的父级选择器{*zoom:1;}/*只有ie7可识别 css hack写法*

浮动元素的父级选择器:

 1 after{
 2 display: block
 3 content:"";
 4 clear: both;
 5 height:0;/*如果是在ie低版本浏览器(ie6、7、8)下展示,有时候浏览器会默认
 6 height元素有1px的高度*/
 7 font-size: 0;
 8 overflow: hidden;
 9 visibility: hidden;/*为了防止元素内有内容显示出来*
10 }

面试题:如何让一个元素消失在视野中

visibility: hidden-盒子看不到,但是盒子所占的大小依然还在 display:none-盒子完全从页面中消失 opacity:0-透明度为0(完全透明) width/height/line-height+ overflow-宽度/高度/行高+溢出隐藏

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 /*
 8 控制台:鼠标右键检查(F12)可以发现在元素之前有::before在元素之后有一个::after
 9 */
10 .todady::before{
11 content: "昨天星期一";
12 color: red;
13 }
14 .todady::after{
15 content: "明天星期三";
16 color: magenta;
17 }
18 </style>
19 </head>
20 <body>
21 <div class="todady">今天星期二</div>
22 </body>
23 </html>