|
网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 1. 普通流（标准流） o 块级元素会独占一行，从上向下顺序排列； § 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table o 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行； § 常用元素：span、a、i、em等 在标准流中，块级元素独占一行，如果想让块级元素在一行显示，可以通过将块级元素转化为行内块元素（display：inline-block）解决这个需求，但是每个块元素之间会有白色空白间隙。原因呢是div之前是独占一行两个div之间有换行。 这时候就可以用到浮动了 浮动可以让块元素没有间隙且在一行显示， 浮动的元素有三大特性 1 会脱离标准流 浮动的元素会脱离标准流。 2 不占有原来的位置，下面的标准流占有原来的的位置 3 浮动会改变元素display属性，转化成类似行内块的块级框 浮动的用法 属性：none，默认值，不浮动。 属性：left，元素向左浮动。 属性：right，元素向右浮动。 如果父盒子没有高度，而子盒子浮动了，就会引起父盒子塌陷，高度变成0. 因为子盒子浮动不占有原来的高度，相当于父盒子内没有标准流来支撑高度。 这种问题可以通过清楚浮动来让父盒子拥有高度。 1 在子盒子最后添加一个空标签 <div style=”clear:both”></div> 2给父盒子中添加 overflow为 hidden|auto| scroll 3单伪元素 .clearfix:after { content: ""; display: block;height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 兼容性*/ 4双伪元素 .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } 使用伪元素清楚浮动的方法是在标签内添加一个名为clear fix的class属性来调用。实际开发多用伪元素清除浮动，不会对结构带来影响。
| 
收藏
淘帖
踩
