HTML布局与浮动

布局

文档流:

元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。

显示框：display属性

block       块元素默认值，元素显示为块级元素（独占一行）
​
inline      内联元素默认值，元素显示为内联（多行元素在一行时，会自动换行）
​
inline-block 行内块元素 具有 内联和块元素的多种特性
​
none        元素不会被显示（隐藏）
        -与display:none相似的有一个visibility: hidden; 隐藏内容，但原位置保留，不影响布局

浮动：float

left     左浮动
right    右浮动
none     默认值，不会浮动

1. 设置浮动后，div边框会塌陷，原因是设置浮动会脱离文档流。若要清除浮动则可以设置 clear 属性值 但会造成代码冗余

clear：
        -left   在左侧不允许浮动
        -right  在右侧不允许浮动
        -both   在两侧不允许浮动
        -none   默认值，允许两侧浮动

2.可以为div父元素设置高度解决塌陷；但是元素固定高会降低扩展性

3.溢出：overflow 在解决塌陷时下拉列表框的场景不能用。

    visible     默认值，内容不会被修剪，会在盒子外
​
    hidden      内容被修剪，其余内容不可见
​
    scroll      内容被修剪，会以滚动条形式查看其余内容
​
    auto        如果内容被修剪，浏览器会显示滚动条

4.给父级元素添加伪类after，写法较复杂，但没有其他影响，比较推荐使用

// after{

// content: " "; 在浮动元素后添加内容为空。

// display：block； 将添加内容设置为块级元素

// clear：both； 清除元素两边浮动

}

总结：

清除浮动，防止父级边框塌陷的四种方法

1. 浮动元素后面加空div

简单，空div会造成HTML代码冗余

2. 设置父元素的高度

简单，元素固定高会降低扩展性

3. 父级添加overflow属性

简单，下拉列表框的场景不能用

4. 父级添加伪类after

写法比上面稍微复杂一点，但是没