CSS浮动布局
浮动布局
浮动是CSS布局中经常使用的一种手段,其实说白了就是使元素进行漂浮脱离正常的文档流排列机制,实现一堆原本的block状态的标签可以并排显示,当然这也可以使用display:inline-block进行实现,但是通常情况我们不会那么做。
那么在使用浮动时我们应该注意下面的几点。
1.浮动应该发生在一个大盒子内部
2.浮动元素会影响后面文档流排列元素
3.浮动元素会自动转为inline-block状态,这意味着原本的inline元素可设置宽高,而原本的block元素不会独占一行
4.浮动元素会在父盒子的content区域中,不会超出父盒子的padding区域
5.当一个父盒子中所有元素都进行浮动,那么父盒子会丢失高度
使用浮动
对一个元素使用float就可以让该元素飘起来,它可以指定以下一些方向。
选项
说明
left
向左浮动
right
向右浮动
none
不浮动
文档流排列
文档流排列就是自上向下的一种排列方式,对于block元素来说,它应该是独占一行的。
}article section:last-child{box-sizing:border-box;width:100px;height:100px;}