一.浮动(float)
css的定位机制: 普通流/浮动和定位
元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制,移动到其父元素中指定位置的过程。
选择器 {
float: 属性值:
}
属性值: left/right/none
浮动的特性:
- 浮动的元素总是找离他最近的父级元素对齐,但不会超出内边距的范围.
- 父盒子里面的子盒子,如果需要所有子元素一行对齐显示,就需要所有子元素都进行浮动.
- 元素添加浮动后,会变成块元素,元素的大小取决于定义的大小或者默认的内容多少, 浮动根据元素书写的位置显示相应的浮动.
二.浮动总结
1.浮动脱离文档流的,原来还在文档流的元素,会向上移动.
2.元素浮动以后,会尽量向页面的左上或是右上漂浮,直到遇到父元素的内边距(padding)或者其他浮动元素.
3.浮动的元素不会超过块元素.
4.浮动的元素不会超过上边的兄弟元素.
5.浮动会更改元素的显示方式: block.
三.版心和布局流程
1.布局流程
- 确定页面版心,即可视区.
- 分析页面中的行模块,以及每个行模块中的列模块.
- 制作HTML结构.
- CSS初始化,运用盒子模型原理,通过DIV/CSS布局来控制页面的各个模块.
四.内容溢出时处理 overflow
overflow 属性规定当内容溢出元素框时发生的事情。
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
五.清除浮动
使用方法一:
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix {
*zoom:1;
}
.clearfix:after {
clear:both;
}
优点: 代码更简洁
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
代表网站: 小米、腾讯等
进阶安全版
使用方法二:
.clearfix{
zoom:1;
}
.clearfix:after,.clearfix:before{
content:"";
display:table;
}
.clearfix:after{
clear:both;
visibility:hidden;
font-size:0;
height:0;
}