css浮动与定位解析--2019年9月4日 20点 - 编程

Home > List of blog posts > css浮动与定位解析--2019年9月4日 20点

Blogger Information

Blog 9

fans 0

comment 0

visits 7639

Special Recommendation

More>

Related recommendations

实例

<!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">
    <title>Document</title>
    <style type="text/css">
        .parent {
            width: 200px;
            border: dashed 2px blue;
        }
        
        .box {
            width: 100px;
            height: 100px;
            float: left;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box">我是子盒子</div>
    </div>
</body>

</html>

运行实例 »

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

如果要消除此影响只需要在父盒子上添加overflow: hidden; 即可。如下

实例

<!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">
    <title>Document</title>
    <style type="text/css">
        .parent {
            width: 200px;
            border: dashed 2px blue;
            overflow: hidden;
        }
        
        .box {
            width: 100px;
            height: 100px;
            float: left;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box">我是子盒子</div>
    </div>
</body>

</html>

运行实例 »

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

二、三列布局的实现原理( 绝对定位实现, 浮动定位实现)

绝对定位实现如下

实例

<!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">
    <title>Document</title>
    <style type="text/css">
        .wrap {
            width: 1000px;
            margin: 0 auto;
        }
        
        .header {
            background-color: green;
            height: 100px;
        }
        
        .main {
            margin: 5px auto;
            position: relative;
        }
        
        .footer {
            background-color: red;
            height: 100px;
        }
        
        .left {
            background-color: blue;
            width: 200px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .right {
            background-color: pink;
            width: 200px;
            height: 300px;
            position: absolute;
            right: 0;
            top: 0;
        }
        
        .content {
            height: 300px;
            background-color: aqua;
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="header">头部</div>
        <div class="main">
            <div class="left">左侧</div>
            <div class="content">内容</div>
            <div class="right">右侧</div>
        </div>
        <div class="footer">底部</div>
    </div>
</body>

</html

运行实例 »

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

浮动定位实现如下

实例

<!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">
    <title>Document</title>
    <style type="text/css">
        .wrap {
            width: 1000px;
            margin: 0 auto;
        }
        
        .header {
            background-color: green;
            height: 100px;
        }
        
        .main {
            margin: 5px auto;
            overflow: hidden;
        }
        
        .footer {
            background-color: red;
            height: 100px;
        }
        
        .left {
            background-color: blue;
            width: 200px;
            height: 300px;
            float: left;
        }
        
        .right {
            background-color: pink;
            width: 200px;
            height: 300px;
            float: right;
        }
        
        .content {
            width: 600px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="header">头部</div>
        <div class="main">
            <div class="left">左侧</div>
            <div class="content">内容</div>
            <div class="right">右侧</div>
        </div>
        <div class="footer">底部</div>
    </div>
</body>

</html

运行实例 »

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

总结：

1、消除子元素浮动造成父元素高度折叠的影响最佳方法是在父元素中添加overflow：hidden;

2、定位position：分为static静态定位（默认），relative相对定位，absolute绝对定位，fixed固定定位；relative相对定位不会脱离文档流，是相对原来位置偏移；absolute绝对定位会脱离文档流，如果上级元素有设置定位属性，则以最靠近该元素且设置了定位属性的上级为参照进行定位，否则则以body为参照进行定位。

3、浮动可以实现特殊布局，比如三列布局，overflow：hidden，可以消除浮动对后面元素的影响。

4、定位可以实现遮罩、QQ客服、三列布局等；

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

phpstudy v8集成环境安装启动与本地主机搭建--2019年8月29日 21点0分

2019-08-30 20:45:49

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例

实例

实例