1、定位方式
1、1普通流:就是在html文档中从左到右,从上到下,按顺序排列下来的元素。
1、2浮动:脱离文档流,浮动方向有向左向右。浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。
1、3绝对定位:脱离文档流,fixed相对于body绝对定位。absolute相对于非static属性的第一个祖先元素定位;
其实我们可以把这3种定位方式当成3层不同的面,重叠在一起;
虽然从视觉上看,似乎是在一块的。
2、浮动的特征
脱离了普通流;所以浮动的元素对普通流的元素没有任何的影响;!!!
可以观察一下父元素的属性设置:因为父元素高度没有被展开,所以它的的高度为0;便于观察,我们将他的边框设置成5px;
所以下一个父元素就紧接在后面,也不受到z1、2、3、的影响;
3、清除浮动
如果清除浮动;
其实我们发现,最重要的原因就是父元素的高度无法展开,从而导致在页面的布局出现混乱、
3、1 给父元素设置高度;
这样就不会影响到页面的布局;
但是子元素还是浮动的元素!!
3、2使用clear
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素,底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。
通过在别的元素上清除浮动来实现撑开高度的, 而不是在浮动元素上。
3、2给父级元素设置伪类
.f:after{
clear: both;
content: ” “;
visibility: hidden;
height: 0;
display: block;
}
3、3给父元素添加属性 overflow:hidden;
浏览器会自动检查浮动区域的高度;
3、4给父元素添加属性:overflow:auto
3、5将父级元素也变成浮动元素:
那么整体下来都是浮动元素,子元素就会对父元素产生影响;
高度就自然展开;
但是但是宽度变了。如果想它它占满一行,可以另外设置display:block;
3、6给父元素设置属性:display:table
3、7在子元素后面加一个br、p、ul……标签、属性为clear:both;
a标签的时候就用不了。具体可以尝试一下;