前端之浮动布局

最初,文本内浮动图像,文字环绕在它的左边或右边.
之后,任何东西都可以浮动,出现了drop-cap（首字下沉）.
现在,被看作传统的布局方法。

引入浮动

图片浮动

<style>
/* 浮动图片
图片向左浮动,此时文本会包围过来,然后用图片外边距向右推开文本,留出间隙 */

img {
    float: left;
    margin-right: 30px;
}
</style>

浮动盒子的旁边会被正常布局中的下方元素围过来.

段首字母下沉

<style>
/* 首字母下沉 */

p::first-letter {
    text-transform: uppercase;
    float: left;
    font-size: 3rem;
    background-color: red;
    padding: 2px;
    margin-right: 4px;
    border: 1px solid black;
}
</style>

网页实例

多列浮动布局

浮动通常用于创建多个列布局.

布局时貌似都留了4%的空间.

两列布局

每列宽度不超过50%(百分比, 流式布局,调整为不同的屏幕尺寸,保持列宽比例),一左一右浮动.

<style>
body {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

div:nth-of-type(1) {
    width: 48%;
    float: left;
}

div:nth-of-type(2) {
    width: 48%;
    float: right;
}
</style>

网页实例

三列布局

<style>
body {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

div:nth-of-type(1) {
    width: 36%;
    float: left;
}

div:nth-of-type(2) {
    width: 30%;
    float: left;
    margin-left: 4%;
}

div:nth-of-type(3) {
    width: 26%;
    float: right;
}
</style>

清除浮动

伪元素清除浮动（网上找的，这里记下，还没用过）

<div class="l-form-row">
    <div class="l-form-label"></div>
    ....
</div>
<style>
    .l-form-row:after {
        clear: both;
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden
    }
</style>

浮动问题

box-sizing

box-sizing 通过更改盒模型来拯救我们，盒子的宽度取值为 content + padding + border，而不仅是之前的content——所以当增加内边距或边界的宽度时，不会使盒子更宽——而是会使内容调整得更窄。

修复下图问题

三列浮动布局,给页面加上页脚,结果如上.
修复方法如下:
在浮动布局的下方加入代码:

    <div class="clearfix"></div>

<style>
.clearfix {
    clear: both;
}
</style>

用这个div清除浮动后.
也给了下方的footer设置外边距的依靠.

但列的高度不同看起来很不协调.可以考虑用overflow是内容滚动.
还是grid好.
网页实例
下一节: 前端之定位布局