CSS定位机制

CSS中，存在3种定位机制:
标准文档流（Normal flow）
* 特点:从上到下，从左导游，输出文档内容
* 由块级元素和行级元素组成

浮动（Floats）
* 能够实现横向多列布局
* 设置了浮动的元素，仍旧处于标准文档流中
* 注意：当元素没有设置宽度值，而设置了浮动属性，
元素的宽度随内容的变化而变化，
同时，高度也没办法扩展了，所以要清除浮动的影响
* 清除浮动常用方法:
* clear:both; 对于紧邻的元素有效
* 设置width:100%(或固定宽度)+overflow:hidden;

绝对定位（Absolute positioning）
* 注意：当元素没有设置宽度值，而设置了定位属性，
元素的宽度随内容的变化而变化，
* 实现横向两列布局
* 常用于一列固定宽度，另一列宽度自适应的情况
* 父元素relative
自适应宽度元素绝对定位
注意：固定宽度列的高度 > 自适应宽度的列

巴特西

CSS定位机制

最新文章

热门文章