- float,属性值有left、right、none(默认)
- 什么是浮动:所谓浮动就是将元素从标准文档流中抽离出来,在浮动流中按照新的排列规则进行排列
a) 标准文档流:也称为标准流,就是指元素的默认的排列规则
b) 浮动流:所谓浮动流就是指元素设置了float属性后,该元素会被从标准流中抽离出来,在标准流的上面新建一个层,在这个层中都按照在一行显示的原则进行排列,这种排列规则就是浮动流 - 元素浮动所带来的影响
a) 元素脱离标准流后,它原有的位置会丢失,标准流中的其它元素会占据浮动元素在标准流中的原有位置
b) 在浮动流中所有元素都是在一行显示的,但是如果空间不够的话浮动的元素会自动换行
c) 浮动的元素自动变成块元素
d) 浮动的元素宽度为最小宽度,为了方便控制,通常给浮动元素加width
e) 浮动的元素脱离标准流后,标准流中的元素会占据它的位置,但是标准流中的文本会对浮动元素形成环绕效果
f) 两个元素上下间的距离,默认是用较大的margin值,但是如果这两个元素有浮动,那么两个元素上下间的距离采用求和算法
g) 元素在浮动时会分析前面元素的类型,如果前面的元素是块元素,那么浮动后浮动的元素在块元素下面显示
h) 如果元素都向右浮动,那么元素的显示顺序为倒叙(即通过浮动可以改变元素的显示顺序),元素都向右浮动的情况并不多见
i) 如果一个元素中的所有子元素都浮动了,那么父元素高度会塌陷为0,父元素如果有背景色,那么此时背景色不会显示,且会影响其它元素,(如主体左右列浮动后,页脚会跑到主体下面),处理塌陷的方法
给父元素设置高度
使用clear属性,该属性具有清除浮动的作用,属性值有left、right、both、none(默认),使用方法是:在父元素中加一个空标签,如div,设置该div的样式为clear:both
left:清除左侧浮动(就是左侧没有浮动元素)
right:清除右侧浮动(就是右侧没有浮动元素,基本不使)
both:清除两侧浮动(就是让设置了clear属性的元素两侧没有浮动元素,使用最为频繁)
使用:after选择器,在父元素后面添加一个空的内容,然后使用clear:both清除浮动,格式为:父元素:after{content:””;display:block;clear:both},注意如果父元素没有固定宽度,那么该方法IE6/5并不支持,解决的方法在父元素上面zoom:1
给父元素加overflow:hidden、auto,注意如果父元素没有固定宽度,那么该方法IE6/5并不支持,解决的方法在父元素上面zoom:1 - 浮动的利用
a) 布局
b) 网页各模块的制作
第九篇 CSS-06
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- CSS中的float属性简介 几乎所有会WEB前端开发的同学都知道CSS中有一个float属性用于实现HTML元素...