简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 浮动与定位的实现
Blogger Information
Blog 9
fans 1
comment 0
visits 9206
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
浮动与定位的实现
jiangxiaobai
Original
1224 people have browsed it

浮动demo

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素与定位</title>
</head>
<body>
<div class="box" style="width: 300px; height: 300px; background-color: gold; border:1px solid  red; antiquewhite; margin: 0 auto; padding: 10px;box-sizing: border-box">

    <div class="box1" style="width: 100px; height: 100px; background-color: darkred; float: left;"></div>
    <div class="box2" style="width: 100px; height: 100px; background-color: dodgerblue;float: right"></div>
</div>
</body>
</html>

运行实例 »

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

分析：浮动元素要设置父级元素的高度，因为子元素浮动的时候脱离了标准文档，等于父元素的div没有了高度，所以要设置高度。或者给父元素设置overflow:hidden属性。我们实验发现浮动元素（向左或向右）一直遇到父元素（左上角或右上角）或另一个浮动元素时停止浮动，需要注意的是，如果父元素有padding值，浮动元素无法跨越padding。

三列布局实现原理

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style/style1.css">
    <title>Title</title>
</head>
<body>
<div class="container">
    <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>

运行实例 »

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

实例

.container {
    width: 1200px;
    margin: 0 auto;
}
.header,.footer{
    height:60px;
    background-color: green;
}
.main{

   position: relative;
    background-color: aquamarine;
    margin: 5px auto;
    /*overflow: hidden;*/


}
.left{
    width: 200px;
    background-color: red;
    height: 800px;
    position: absolute;
    top: 0;
    left: 0;
    /*float: left;*/

}
.right{
    width: 200px;
    background-color: red;
    height: 800px;
    position: absolute;
    top: 0;
    right: 0;
   /* float: left;*/

}
.content{

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


    /*float: left;*/
}

运行实例 »

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

定位一般也要设置父级，一般是给父级设置relative，然后子元素设置absolute.设置之后在设置他的left top值，定位是可以穿越padding值的。

Correction status：qualified

Teacher's comments：关于定位父级的定位属性, 并非只能是relative, 也可以是absolute, 其实, 相对定位使用的场景不多, 90%的情况下, 都用在当定位父级了
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！