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>