HTML/CSS -- 利用float进行页面布局

梦里梦外; 2022-04-10 02:15 268阅读 0赞

布局1： 高度已知，左边固定，右边自适应

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

当我们缩小浏览器窗口时，黄色自动缩小

<section>
            <article>
                <style>
                    .part2-content-wrap div {
                        height: 300px;
                    }
                    .part2-content-left {
                        width: 300px;
                        float: left;
                        background: red;
                    }
                    .part2-content-right {
                        width: 100%;
                        background: yellow;
                    }
                </style>
                <div class = "part2-content-wrap"> 
                    <div class = "part2-content-left"></div>
                    <div class = "part2-content-right">
                        <h1>使用浮动方案解决</h1>
                        <p>高度已知，左边固定，右边自适应</p>
                    </div>
                </div>
            </article>
        </section>

高度已知，右边固定，左边自适应同理可得！

布局2：高度已知，两边宽度已知，中间自适应

![20181223225453890.png][]

当我们缩小浏览器窗口时，绿色自动缩小

<section>
            <article>
                <style>
                    .part1-content-wrap div{
                        height: 100px;
                        
                    }
                    .part1-content-left {
                        float: left;
                        width: 300px;
                        background: red;
                    }
                    .part1-content-right {
                        float: right;
                        width: 300px;
                        background: yellow;
                    }
                    .part1-content-center  {
                        background: green;
                        text-align: center;
                    }
                </style>
                <div class = "part1-content-wrap">
                    <div class = "part1-content-left"></div>
                    <div class = "part1-content-right"></div>
                    <div class = "part1-content-center">
                        <h1>使用浮动方案解决</h1>
                        <p>高度已知，两边宽度已知，中间自适应</p>
                    </div>
                </div>
            </article>
        </section>

我们来看一下浮动布局带来的问题

看如下代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]

不难发现，利用float布局，如果高度不一样，就出现问题了，这也是float布局的重大缺席。

float本身带来的麻烦。

1：使得inline元素block化

![20181224111425740.png][]

2：包裹性

![20181224112410504.png][]

3：破坏性

因为float元素会脱离文档流（与position: absolute不一样），会导致好像没有高度一样。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2][]

因为红色和黄色都浮动了，所以绿色就会往上移动。

清除float

1：利用clear属性

2：开启BFC

clear属性

**我们之所以能够使用clear解决float引起的父元素塌陷问题，其实就是因为加了clear的空标签或者是那么伪类元素，把top值设置在了浮动元素的bottom边缘下方，从而能够撑起父元素**

nav::after{
                content: "";
                display: table;
                clear: both;
            }

**`display:table`;是为了防止子元素垂直方向上的边距折叠，也就是通常说的子元素margin-top会被转移到父元素的问题**

![20181224114643432.png][]

父元素开启BFC(google BFC）

nav {
                overflow: hidden;
            }

也完全没有问题

float布局：兼容性比较好，简单方便，但是也有本身的局限性和float本身带来的问题。

最后提一句：float原本是实现文字环绕效果的，不忘初心。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220403/75e00bfe5a5b4220b7d6796451948824.png
[20181223225453890.png]: /images/20220403/788bca17fc30407b82b9b9eb2a190588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20220403/01c422e6cecc482bae073717e6d9bb57.png
[20181224111425740.png]: /images/20220403/e4b62eef816740fe9b54b4910f1684db.png
[20181224112410504.png]: /images/20220403/cc984a22df0245d48437104ab9b2e4fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 2]: /images/20220403/d99695f0b5e5401295e0a77500f88e7a.png
[20181224114643432.png]: /images/20220403/9cc7091d2e394670a56720d97484ed39.png