CSS之 浮动,清除浮动,书写规范
CSS 布局的三种机制
css 提供了三种机制来设置盒子的摆放位置,分别是普通流、浮动和定位;
- 普通流:块级元素会独占一行,从上至下;行内元素会按照顺序,从左至右,碰到边缘自动换行;
- 浮动:让盒子从普通流浮动起来,主要作用让多个块级元素一行显示;
- 定位:让盒子定在浏览器的某一个位置 -- css 离不开定位,特别是后面的 js 特效。
为什么需要浮动
因为一些网页布局要求,因为标准流不能满足我们的需要了,因此需要浮动来完成网页布局;
什么是浮动
概念:元素的浮动是指设置了浮动属性的元素
- 脱离了标准流的控制;
- 移动到了指定的位置。
作用:
- 让多个盒子并排一列,使得浮动成为布局的主要手段;
- 可以实现盒子左右对齐等等;
- 浮动最早用来控制图片,实现文字环绕的效果。
语法:
选择器 {float: 属性值;}
属性值 | 描述 |
---|---|
none | 默认值 元素不浮动 |
left | 元素向左浮动 |
right | 元素向右浮动 |
特性
- float 属性会让盒子漂浮在标准流的上面,所以第二个标准流的盒子跑到浮动盒子的下面;
- 把自己原来的位置留给下面标准流的盒子,不占有原来的位置;脱标
- 任何元素都可以浮动,浮动元素会生成一个块级框,不论它本身是什么元素,这个块级框的特性与行内块极其相似;
- 浮动元素互相紧贴在一起,但是如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行显示
float 的应用
浮动是脱标的,会影响下面的盒子,所以实际工作中,不会随意的使用浮动,而是经常给浮动的元素添加一个标准流的父级元素,这样最大化的减少了对其他标准流的影响。
浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐;
- 不会与父盒子的边框重叠,也不会超过父盒子的内边距。
浮动元素与兄弟盒子的关系
在一个父级盒子中,如果前一个兄弟是
- 浮动的,那么当前盒子会与前一个盒子的顶部对齐
- 普通流的,那么当前盒子会显示在前一个兄弟盒子的下方
在一个父级盒子中,如果下一个兄弟是
- 浮动的,则按照标准流从上至下排序;
注意:浮动元素只会影响当前或者后面的标准流盒子,不会影响前面的标准流;
清除浮动
为什么清除浮动
因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父盒子的高度为零,就影响了下面标准流的盒子;
清空浮动的本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题,清除浮动后,父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流;
清除浮动的方法
选择器: {clear: 属性值;}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
实际工作中,几乎只用 clear: both;
额外标签法(隔墙法)
是 W3C 推荐的做法是通过在浮动元素末尾添加一个空的标签例如,
<div style="clear: both;"></div>
,或则其他标签 br 等亦可;
- 优点:通俗易懂,书写方便
- 缺点:添加许多无意义的标签,结构化较差
父级添加 overflow 属性方法
/* 任意一个都可以实现 */
选择器 {overflow: hidden | auto | scroll;}
- 优点:代码简洁
- 缺点:内容增多时容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
使用 :after 伪元素清除浮动
:after 方式为空元素额外标签法的升级版,好处是不用单独加标签了;给需要清除浮动的父元素添加
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6-7 专有 */
*zoom: 1;
}
- 优点:符合闭合浮动思想,结构语义化清晰;
- 缺点:由于IE6-7不支持 :after,使用 zoom: 1 触发 hasLayout
使用双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* IE6-7 专有 */
*zoom: 1;
}
CSS 书写顺序
建议遵循以下顺序
- 布局定位属性:display,position,float,clear,visibility,overflow (建议display 第一个写)
- 自身属性:width,height,margin,padding,border,background
- 文本属性:color,font,text-decoration,text-align,vertical-align,white-space,break-word
- 其他属性(css3):content,cursor,border-dadius,box-shadow,text-shadow,background:linear-gradient...
.jdc {
display: block;
position: relative;
folat: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 10px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0, 0, 0, 0.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px
}