CSS 浮动

最新推荐文章于 2022-11-26 11:43:22 发布

昨夜太平长安888

最新推荐文章于 2022-11-26 11:43:22 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 浮动浮动的特性

本文链接：https://blog.youkuaiyun.com/HelloWord176/article/details/100623249

CSS 专栏收录该内容

14 篇文章

订阅专栏

什么是浮动？

所谓css浮动就是浮动元素会脱离文档的普通流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块级元素表现得就像浮动元素不存在一样！

浮动多数是用来页面布局，让其他元素可以在同一行显示！！！

CSS包含3种基本的布局模型：

flow 流动模型(普通文档流)；
float 浮动模型；
layer 曾模型定位；

float：定义元素在哪个方向浮动

float：left；左浮动
float：right；右浮动
float：none；默认不浮动；

浮动元素的特性：

1.块元素如果没有设置宽度，添加浮动之后，宽度是有内容撑开的！

<!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>浮动练习</title>
    <style>
        .box {
            width: 250px;
            height: 250px;
            background-color: chartreuse;
        }
        .boxone {   /*第一个盒子左浮动*/
            float: left;
            height: 50px;
            background-color: violet;
        }
        .boxtwo {  /*第二个盒子右浮动*/
            float:right;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxone">我是第一个盒子</div>
        <div class="boxtwo">我是第二个盒子</div>
    </div>
</body>
</html>

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">
    <title>左浮动练习</title>
    <style>
        .box {
            width: 250px;
            height: 250px;
            background-color: chartreuse;
        }
        .boxone {   /*第一个盒子左浮动*/
            float: left;
            width: 100px;
            height: 100px;
            background-color: violet;
        }
        .boxtwo {  /*第二个盒子左浮动*/
            float:left;
            width: 100px;
            height: 100px;            
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxone">我是第一个盒子</div>
        <div class="boxtwo">我是第二个盒子</div>
    </div>
</body>
</html>

3. 右浮动会颠倒盒子的顺序

<!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>右浮动练习</title>
    <style>
        .box {
            width: 250px;
            height: 250px;
            background-color: chartreuse;
        }
        .boxone {   /*第一个盒右浮动*/
            float: right;
            width: 100px;
            height: 100px;
            background-color: violet;
        }
        .boxtwo {  /*第二个盒子右浮动*/
            float:right;
            width: 100px;
            height: 100px;            
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxone">我是第一个盒子</div>
        <div class="boxtwo">我是第二个盒子</div>
    </div>
</body>
</html>

4.假如一行元素之上只有极少的空间可供元素浮动，那么这个元素会自动到下一行

<!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>空间不够浮动自动换行</title>
    <style>
        .box {
            width: 250px;
            height: 250px;
            background-color: chartreuse;
        }
        .boxone {   /*第一个盒左浮动*/
            float: left;
            width: 100px;
            height: 100px;
            background-color: violet;
        }
        .boxtwo {  /*第二个盒子左浮动*/
            float: left;
            width: 100px;
            height: 100px;            
            background-color: aqua;
        }
        .boxthree {   /*第三个盒子左浮动*/
            float: left;
            width: 100px;
            height: 100px;            
            background-color: darkorange;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxone">我是第一个盒子</div>
        <div class="boxtwo">我是第二个盒子</div>
        <div class="boxthree">我是第三个盒子</div>
    </div>
    <h1>假如一行元素之上只有极少的空间可供元素浮动，那么这个元素会自动到下一行</h1>
</body>
</html>

5.行内元素添加浮动之后，无需转换就可以设置宽高！

<!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>行内元素添加浮动之后无需转换就可以设置宽高</title>
    <style>
        div {
            width: 500px;
            height: 250px;
            background-color: aqua;
        }
        div span{
            float: left;
            width: 100px;
            height: 150px;
            background-color: darkgoldenrod;
        }
    </style>
</head>
<body>
    <div>
        <span>行内元素本身不可以设置宽高，但是添加浮动之后无需转换就可以设置宽高</span>
    </div>
</body>
</html>

6.浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容！

<!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>浮动元素会脱离文档流会压住下一个块元素，但不会压住其内容</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .box1{
            float: left;
            background-color: chocolate;
        } 
        .box2 {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box1">我是第一个盒子</div>
    <div class="box2">我是第二个盒子</div>
</body>
</html>