浮动
一.浮动
1.元素脱标:元素脱标是浮动的元素脱离了标准文档流
2.span标签和div标签设置为浮动后就具有了行内块的属性,即可以和其他元素共用一行,也可设置宽高
3.收缩:如果一个block元素浮动之后,宽度就由内容决定,而不是父容器决定
4.行元素:与其他元素共用一行;不能设置宽高,默认宽高就是里面内容的宽高
5.块元素:独占一行;能设置宽高,若不设置,默认宽度为父级容器宽度,高度为内容高度.
6.行元素和块元素没有太明显的界限,可以通过display属性将二者转换display:inline(行);block(块)
7.浮动的元素会互相贴靠在一起
8.标准文档流中的文字,不会被浮动的元素遮住
9.浮动的元素使用margin时不会出现标准文档流中坍塌的情况(设置两个margin值,实际选取最大的)
二.清除浮动:
如果一个元素要浮动,那么他的父容器或者祖容器一定要有高度才不会影响其他元素
1.clear:left/right/both;清除左/右/左或右浮动元素的影,虽然能够清除浮动,但margin属性却失效了,没有任何间隙
2.隔墙法:在两个元素之间建立一个div(墙),隔开两个浮动的部分,让后浮动的元素不去追前面浮动的元素,一般会用墙(div)的厚度(height)来代替margin,虽然隔墙了,但div里面本质上还是没有高度的
3.内墙法:在浮动元素后使用一个空元素如<div class="clear"></div>并在CSS中赋予.clear{clear:both;}属性即可清理浮动;隔墙法的变种,在有浮动元素的盒子内部增加墙就能撑出盒子的高度.
4.overflow:hidden法:这个属性的本意是清除超出边框的内容,但是我们发现它能清除浮动;一个父容器是不能被自己的浮动的子元素撑出高度的,若父容器加上了overflow:hidden父容器就有高度了,也能设置margin了