实例演示消除折叠、三列布局的实现原理-19年9月4日

实例演示如何消除子元素浮动造成父元素高度折叠的影响

实例

<div class="box">
    <div class="box1"></div>
</div>

运行实例 »

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

实例

.box {
    overflow: hidden;
}

运行实例 »

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

父元素添加overflower,用来清浮动。

2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)

绝对定位

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/css.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="top">头部</div>



        <div class="main">
            <div class="left">左侧</div>
            <div class="content">内容</div>
            <div class="right">右侧</div>
        </div>


        <div class="boot">底部</div>
    </div>
</body>

</html>

运行实例 »

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

实例

.container {
    width: 1000px;
    margin: 0 auto;
}


.top {
    height: 40px;
    background-color: lightgrey;
}

.boot {
    height: 40px;
    background-color: lightgrey;
}


.main {
    /*min-height: 800px;*/
    margin: 5px auto;
    background-color: lightblue;
}



.left {
    width: 200px;
    min-height: 800px;
    background-color: lightgreen;
}

.content {

    min-height: 800px;
    background-color: lightseagreen;
}

.right {
    width: 200px;
    min-height: 800px;
    background-color: lightpink;
}


.main {
    position: relative;
}

.left {
    position: absolute;
    left: 0;
    top: 0;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
}


.content {
    margin-left: 210px;
    margin-right: 210px;
}

运行实例 »

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

浮动定位实现

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/css.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="top">头部</div>
        <div class="main">
            <div class="left">左侧</div>
            <div class="content">内容</div>
            <div class="right">右侧</div>
        </div>
        <div class="boot">底部</div>
    </div>
</body>

</html>

运行实例 »

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

实例

.container {
    width: 1000px;
    margin: 0 auto;
}


.main {

    margin: 5px auto;
    background-color: lightblue;
}

.top {
    height: 60px;
    background-color: lightgrey;
}

.boot {
    height: 60px;
    background-color: lightgrey;
}


.left {
    width: 200px;
    min-height: 800px;
    background-color: lightgreen;
}

.content {
 
    min-height: 800px;
    background-color: lightseagreen;
}

.right {
    width: 200px;
    min-height: 800px;
    background-color: lightpink;
}




.left {
    float: left;
}


.right {
    float: right;
}



.content {
    float: left;
    width: 580px;
    margin-left: 10px;
}


.main {
    overflow: hidden;
}

运行实例 »

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

float: left; 就是向左浮动

float: right; 就是向右浮动

overflow: hidden; 就是清除浮动

绝对定位用 position 浮动定位用 float

实例

实例

实例

实例

实例

实例

相关文章