浮动与定位的简单认知--2019-0904 - 前端学习

首页 > 博客列表 > 浮动与定位的简单认知--2019-0904

博主信息

博文 22

粉丝 0

访问量 17720

专题推荐

更多>

实例

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

<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="static/css/style1.css">
    <title>浮动设置与清除</title>
</head>

<body>
    <div class="container">
        <div class="con1">
            <h4>父级元素设置overflow属性</h4>
            <div class="box11">1</div>
            <div class="box12">2</div>
        </div>
        <div class="con3">
            <h4>添加一个具有clear属性区块</h4>
            <div class="box31">1</div>
            <div class="box32">2</div>
            <div class="clear"></div>
        </div>
        <div class="con4">
            <h4>将父元素的高度设置为浮动的子元素中的最大高度</h4>
            <div class="box41">1</div>
            <div class="box42">2</div>
        </div>
        <div class="con2">
            <h4>父级元素同样设置float属性</h4>
            <div class="box21">1</div>
            <div class="box22">2</div>
        </div>
    </div>
</body>

</html>

运行实例 »

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

css代码

.container {
    border: 2px solid black;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

.con1 {
    width: 300px;
    border: 2px solid red;
    overflow: hidden;
    margin-bottom: 20px;
}

.box11 {
    width: 150px;
    height: 200px;
    float: left;
    background: lime;
}

.box12 {
    width: 100px;
    height: 300px;
    float: right;
    background: lightsalmon;
}

.con3 {
    width: 300px;
    border: 2px solid blue;
    margin-bottom: 20px;
}

.box31 {
    width: 150px;
    height: 200px;
    float: left;
    background: lime;
}

.box32 {
    width: 100px;
    height: 300px;
    float: right;
    background: lightsalmon;
}

.clear {
    clear: both;
}

.con4 {
    width: 300px;
    height: 400px;
    border: 2px solid blueviolet;
    margin-bottom: 20px;
}

.box41 {
    width: 150px;
    height: 200px;
    float: left;
    background: lime;
}

.box42 {
    width: 100px;
    height: 300px;
    float: right;
    background: lightsalmon;
}

.con2 {
    width: 300px;
    /* height: 150px; */
    border: 2px solid black;
    float: left;
    margin-bottom: 20px;
}

.box21 {
    width: 150px;
    height: 200px;
    float: left;
    background: lime;
}

.box22 {
    width: 100px;
    height: 300px;
    float: right;
    background: lightsalmon;
}

运行实例 »

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

运行结果：

浮动是将元素向左或者向右移动直到碰到另一个浮动元素或者父级元素的边框位置；元素浮动之后再水平方向将脱离文档流，并且会在竖直方向上对下面元素的布局造成影响。

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

实例

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

<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="static/css/style2.css">
    <title>定位</title>
</head>

<body>
    <div class="box1">
        <h2>定位实现三列布局</h2>
        <div class="top">head</div>
        <div class="main">
            <div class="left">左侧</div>
            <div class="center">中</div>
            <div class="right">右侧</div>
        </div>
        <div class="footer">footer</div>
    </div>
    <div class="box2">
        <h2>浮动实现三列布局</h2>
        <div class="top">head</div>
        <div class="main">
            <div class="left">左侧</div>
            <div class="center">中</div>
            <div class="right">右侧</div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

运行实例 »

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

css代码

/* 定位实现三类布局 */

.body {
    margin: 0;
    padding: 0;
}

.box1 {
    margin-bottom: 20px;
    text-align: center;
}

.top,
.footer {
    width: 100%;
    height: 30px;
    background: lightgreen;
}

.top {
    margin-bottom: 20px;
}

.main {
    width: 80%;
    /* height: 500px; */
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 20px;
    position: relative;
}

.left {
    width: 20%;
    height: 200px;
    background: #aaddaa;
    position: absolute;
    top: 0;
    left: 0;
}

.center {
    height: 200px;
    background: lightslategrey;
    margin-left: 20.5%;
    margin-right: 30.5%;
}

.right {
    width: 30%;
    height: 200px;
    background: lightseagreen;
    position: absolute;
    top: 0px;
    right: 0px;
}


/* 浮动实现三列布局 */

.box2 {
    text-align: center;
    margin-bottom: 50px;
}

.box2 .top,
.box2 .footer {
    width: 100%;
    height: 30px;
    background: lightseagreen;
}

.box2 .top {
    margin-bottom: 20px;
}

.box2 .main {
    width: 80%;
    /* height: 500px; */
    margin: auto;
    /* border: 1px solid black; */
    margin-bottom: 20px;
    overflow: hidden;
}

.box2 .left {
    width: 20%;
    /* min-height: 200px; */
    background: #aaddaa;
    float: left;
}

.box2 .center {
    height: 200px;
    background: lightslategrey;
    margin-left: 21%;
    margin-right: 31%;
}

.box2 .right {
    width: 30%;
    /* min-height: 200px; */
    background: lightseagreen;
    float: right;
}

;

运行实例 »

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

运行结果：