3.8
这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧
浮动
语法:float:left | right | none
特点:
浮动的元素不占位置,脱离了标准文档流(页面中标签的默认显示方式就是标准流)
浮动的元素可以实现元素的模式互换
同方向浮动的元素会顺次排列
浮动的元素顶端对齐
默认情况下,子元素浮动只会在父元素的区域之内(除非你刻意用margin把子元素弄出去)
父元素浮动会把子元素一起带跑
浮动前面有标准流,会漂浮到标准流的后面
值得注意的是:文字不会受浮动影响
利用浮动可以实现:
制作网页导航(块级元素在一行上显示)
制作网页左右布局(块级元素在一行上显示)
副作用:当所有的子元素都设置了浮动之后,不占据位置,从而导致父元素没有高度,这时候就需要清除浮动。
清除浮动就是消除浮动的影响
方式:
- 直接给父元素设置高度
- 给父元素设置overflow:hidden (这里面涉及到BFC)
- 使用clear:left | right | both
Clear:可以认为设置了clear属性的元素,不能被浮动的元素覆盖
Left:不允许左边有浮动元素
Right:不允许右边有浮动元素
Both:两边都不允许
用clear 属性清除浮动得到的效果不会涉及到别的元素,只对当前设置元素生效
给父元素添加一个子元素 div ,放在最后面,设置clear:both;
- 使用单伪元素清除浮动(这个方法是必须掌握的)
.clearfix:after{ Content:””;(这个属性必须有) Clear:both; Display:block; Visibility:hidden; Height:0; Line-height:0; }
Overflow的用法:
Overflow:visible 默认值超出部分可见
Overflow:hidden 将超出部分隐藏
Overflow:scroll 添加滚动条
Overflow:auto 自动设置滚动条
先这样吧,大家妇女节快乐