CSS清除浮动及方法
浮动:float 属性定义元素向左/右方向浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。可以使元素inline-block化,具有包裹性,使得元素兼并了块元素和内联元素的的优点。在CSS规范中,浮动定位不属于正常的页面流(page flow),是独立定位的。所以,只含有浮动元素的父容器,在显示时不考虑子元素的位置,就当它们不存在一样。这就造成了显示出来,父容器好像空容器一样。
如下:
效果:
父div的border没有被子元素撑开,就是上述原因,
解决方法一:
经典的解决方法,就是在浮动元素下方添加一个非浮动元素:
原理是父容器现在必须考虑非浮动子元素的位置,而后者肯定出现在浮动元素下方,所以显示出来,父容器就把所有子元素都包括进去了。这种方法比较简单,但是要在页面中增加冗余标签,违背了语义网的原则。
或者,解决方法二:浮动的父容器
另一种思路是,索性将父容器也改成浮动定位,这样它就可以带着子元素一起浮动了。
但是缺点在于父容器变成浮动以后,会影响到后面元素的定位,而且有时候,父容器是定位死的,无法变成浮动。也会影响子元素的定位。
解决方法三:浮动元素的自动clearing
让父容器变得可以自动"清理"(clearing)子元素的浮动,从而能够识别出浮动子元素的位置,不会出现显示上的差错。只要为父容器加上一条"overflow: hidden"的CSS语句就行了。关于为何父容器可以自动识别:由于加上overflow:hidden之后要计算超出的大小来隐藏,所以父容器会自动撑开自己把所有的子元素放进去,同时会计算浮动的子元素。
缺点:一个是IE 6不支持,另一个是一旦子元素的大小超过父容器的大小,就会出显示问题。
解决方法四:CSS语句中有一个:after伪选择符,就可以在父容器的尾部自动创建一个子元素,这正好符合我们的需要。
"content:"020";"是在父容器的结尾处放一个空白字符,"height: 0;"是让这个这个空白字符不显示出来,"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。但是,:after选择符IE 6不支持,也就是说上面的这段代码在IE 6中无效,这怎么办?我们添加一条IE 6的独有命令"zoom:1;"就行了,这条命令的作用是**父元素的"hasLayout"属性,让父元素拥有自己的布局。IE 6会读取这条命令,其他浏览器则会直接忽略它。
所以最好是写作:
详解浮动元素的特征:
http://blog.****.net/sinat_28050007/article/details/48250715
http://www.cnblogs.com/moveofgod/archive/2012/11/15/2771790.html
不单是用于清除浮动, :before 和 :after 的主要作用是在元素内容前后加上指定内容,还有一些其他用途,绘制三角形、对话框等参见:
https://www.cnblogs.com/lynnmn/p/6254367.html
绘制三角形
使用border-left/right/top/bottom
哈哈哈,好久没写博客了太懒了,最近来实习遇到很多问题,准备陆续全补在博客里面,这是之前匆忙记在word里面的,所以都是截图啦,有需要的同学自己敲一遍增加记忆噢!