css搜索框变圆脸角,CSS浮动布局

CSS浮动布局

浮动布局

浮动是CSS布局中经常使用的一种手段，其实说白了就是使元素进行漂浮脱离正常的文档流排列机制，实现一堆原本的block状态的标签可以并排显示，当然这也可以使用display:inline-block进行实现，但是通常情况我们不会那么做。

那么在使用浮动时我们应该注意下面的几点。

1.浮动应该发生在一个大盒子内部

2.浮动元素会影响后面文档流排列元素

3.浮动元素会自动转为inline-block状态，这意味着原本的inline元素可设置宽高，而原本的block元素不会独占一行

4.浮动元素会在父盒子的content区域中，不会超出父盒子的padding区域

5.当一个父盒子中所有元素都进行浮动，那么父盒子会丢失高度

使用浮动

对一个元素使用float就可以让该元素飘起来，它可以指定以下一些方向。

选项

说明

left

向左浮动

right

向右浮动

none

不浮动

文档流排列

文档流排列就是自上向下的一种排列方式，对于block元素来说，它应该是独占一行的。

Document

}article section:last-child{box-sizing:border-box;width:100px;height:100px;​}