关键词

float
overflow
clear

浮动

写法：float:left|right
特点:

给一个元素设置了浮动后，该元素不占位置（脱离标准流）
给一个元素设置了浮动，会影响该元素后面的元素
浮动可以让块级元素在一行上显示
浮动可是实现模式转换（span 设置浮动可以设置宽高）
浮动作用:

浮动最初的作用：解决文字图片环绕效果。（文字不会浮动的影响）
制作网页导航（浮动+列表实现导航）
进行网页布局（div+CSS(盒子模型+浮动+定位)）
注意：
◆让块级元素在一行上显示就使用浮动
◆如果一个元素要实现模式转换，就使用display

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:400px;
height:900px;
border:1px solid red;
}

.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>

让第一个浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:400px;
height:900px;
border:1px solid red;
}

.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
float: left;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>

第二个也浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:400px;
height:900px;
border:1px solid red;
}

.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
float: left;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
float:left;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;

}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>

第三个也浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:400px;
height:900px;
border:1px solid red;
}

.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
float: left;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
float:left;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>

第二个右浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:400px;
height:900px;
border:1px solid red;
}

.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
float: left;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
float:right;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>

浮动常用的三个属性：float:left|right|none 默认none

塌陷：
外层div没设置高度，如果不是全浮动，那么会由内容自动撑开father的高度，但如果里层div全浮动，会导致father塌陷了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:600px;
border:1px solid red;
}

.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
float: left;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
float:right;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>

塌陷是病，怎么治呢？
有两种治法。
第一种治法，除了上面的div,再做一个空的div，在该div的样式设置时，设置清除浮动
第二种治法，在father的css里，设置overflow:hidden 会触发重新计算div的高度

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .father {
                width: 400px;
                border: 1px solid red;
                /* 清除浮动 触发浏览器重新计算高度*/
                overflow:hidden;
            }

            .c1 {
                width: 200px;
                height: 100px;
                background-color: chartreuse;
                float:left;
            }

            .c2 {
                width: 100px;
                height: 150px;
                background-color: green;
                float:right;
            }

            .c3 {
                width: 260px;
                height: 400px;
                background-color: gray;
                float:right;
            }
                
            /* #clear{
                clear:both ;
            } */
        </style>
    </head>
    <body>
        <div class="father">
            <div class="c1">
            </div>
            <div class="c2">
            </div>
            <div class="c3">
            </div>
            <div id="clear"> </div>
        </div>
    </body>
</html>

第7章浮动(1.5课时弃用)

第7章浮动(1.5课时弃用)

关键词

浮动

推荐阅读更多精彩内容

第7章浮动(1.5课时 弃用)

关键词

浮动

推荐阅读更多精彩内容

第7章浮动(1.5课时弃用)