Blogger Information
Blog 38
fans 0
comment 0
visits 29552
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2019年9月4日,子元素浮动的影响和三列布局的两种常用方式
riskcn的博客
Original
878 people have browsed it

一、子元素浮动对父元素高度的影响

首先创建一个嵌套盒子,将子元素设置一个浮动。

实例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    
    .father {
        width: 500px;
        border: 2px dashed red
    }
    
    .son {
        width: 300px;
        height: 300px;
        background: yellow;
        /* 子元素浮动 */
        float: left;
    }
</style>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果如下:

QQ截图20190905143849.png

子元素浮动后脱离了信息流,造成父元素里面没有内容,高度没有了。在实际布局编写中很可能忽略掉这个细节,导致下面的排列布局混乱还很难排查出来,这是新手面临的一个坑。

消除子元素浮动带来的父元素高度折叠的影响一般使用两种方法:

1、给子元素下方添加一个空元素并清除浮动。

实例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    
    .clear {
        clear: both;
    }
    
    .father {
        width: 500px;
        border: 2px dashed red
    }
    
    .son {
        width: 300px;
        height: 300px;
        background: yellow;
        /* 子元素浮动 */
        float: left;
    }
</style>

<body>
    <div class="father">
        <div class="son"></div>
        <!-- 方法1:添加空元素并清除浮动 -->
        <div class="clear"></div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果如下:

QQ截图20190905144616.png

解决问题。

带来的问题是,完整页面DOM结构中又无端地添加了很多div块,但是效果明显,也有很多人在用,只能说四个字“不够优雅”!

2.给父元素添加一个overflow属性

实例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    
    .clear {
        clear: both;
    }
    
    .father {
        width: 500px;
        border: 2px dashed red;
        /* 方法2:打上预防针 */
        overflow: hidden;
    }
    
    .son {
        width: 300px;
        height: 300px;
        background: yellow;
        /* 子元素浮动 */
        float: left;
    }
</style>

<body>
    <div class="father">
        <div class="son"></div>
        <!-- 方法1:添加空元素并清除浮动 -->
        <!-- <div class="clear"></div> -->
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果:

QQ截图20190905144616.png

达成效果,不用额外添加代码,只用在父元素类上添加css属性,优雅的代码大家都喜欢。

提前打好预防针,有备无患!

二、两种常用的三列布局

1、浮动布局

实例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    
    .header,
    .footer {
        height: 100px;
        background: rgba(0, 0, 0, 0.5)
    }
    
    .container {
        margin: 0 auto;
        width: 1000px;
    }
    
    .main {
        overflow: hidden;
        margin: 5px 0;
    }
    
    .left-side {
        width: 250px;
        min-height: 800px;
        background: lightblue;
        float: left;
    }
    
    .content {
        float: left;
        width: 490px;
        min-height: 800px;
        margin-left: 5px;
        background: lightcoral;
    }
    
    .right-side {
        width: 250px;
        min-height: 800px;
        background: lightgreen;
        float: right;
    }
</style>

<body>
    <div class="container">
        <div class="header">头部</div>
        <div class="main">
            <div class="left-side">左边</div>
            <div class="content">内容</div>
            <div class="right-side">右边</div>
        </div>
        <div class="footer">底部</div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果如下:

QQ截图20190905151902.png

完成布局效果,仍然要注意,提前打好overflow的预防针,防止浮动元素下方的块级元素被浮动遮挡。中间部分宽度需精确计算。

二、定位布局

实例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    
    .header,
    .footer {
        height: 100px;
        background: rgba(0, 0, 0, 0.5)
    }
    
    .container {
        margin: 0 auto;
        width: 1000px;
    }
    
    .main {
        position: relative;
        margin: 5px 0;
    }
    
    .left-side {
        position: absolute;
        width: 250px;
        background: lightblue;
        min-height: 800px;
        left: 0;
        top: 0;
    }
    
    .right-side {
        position: absolute;
        width: 250px;
        min-height: 800px;
        background: lightgreen;
        right: 0;
        top: 0;
    }
    
    .content {
        min-height: 800px;
        margin-left: 255px;
        margin-right: 255px;
        background: lightcoral;
    }
</style>

<body>
    <div class="container">
        <div class="header">头部</div>
        <div class="main">
            <div class="left-side">左边</div>
            <div class="content">内容</div>
            <div class="right-side">右边</div>
        </div>
        <div class="footer">底部</div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行效果:

QQ截图20190905151902.png

定位方法一定要选择好参考容器,给父元素添加一个position:relative的方式来避免采用绝对定位时以html为参考容器。

该方法的关键是中间内容部分的挤压成型,和绝对定位带来的脱离信息流的影响

三、总结

1.提前给父元素块加上overflow:hidden,打好预防针,提前解决可能出现的父元素高度折叠问题;

2.布局的两种方法都很实用,根据爱好选择适合自己的方法,两种方法共同的坑点为元素脱离信息流后,下方元素被覆盖的问题,浮动布局需清除浮动或者给父元素添加overflow属性,定位布局需给元素添加最小高度。

Correction status:qualified

Teacher's comments:浮动非常有意思, 一定要多写多玩
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post