CSS的浮动

guigui_hello

已于 2023-07-16 21:40:29 修改

阅读量107

点赞数

文章标签： css 前端

于 2023-07-16 17:03:38 首次发布

本文链接：https://blog.csdn.net/qq_33667332/article/details/131751612

版权

块元素：独占一行，可以设置宽高，如果不设置宽度默认宽度是屏幕宽度。

行内元素：与其他元素同行显示，不可以设置宽高。宽高就是文字或者图片的宽高。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 200px;
            background-color: blue;
        }
        span{
            width: 300px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        这是块级元素1
    </div>
    <div>
        这是块级元素2
    </div>
    <span>
        这是行内元素1
    </span>
    <span>
        这是行内元素2
    </span>
</body>

</html>

浮动：
会使元素向左或者向右一定，只能左右，不能上下。
浮动元素碰到包含框或者另一个浮动框，浮动停止。
浮动元素之后的元素将围绕她，之前的不受影响。
浮动元素会脱离标准流。
浮动的用法
float:left 靠左浮动
float:right 靠右浮动
float:none 不使用浮动
使用浮动后产生的问题：父元素会失去它的高度

没有清除浮动
在这里插入图片描述
清除浮动之后

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .container{
            width: 500px;
            /* height: 500px; */
            border: 2px solid #333;
        }
        .box01{
            width: 100px;
            height: 100px;
            background-color: blue;
            color: #fff;
            float: left;
        }
        .box02{
            width: 100px;
            height: 100px;
            background-color: green;
            color: #fff;
            /* float: left; */
        }
        .box03{
            width: 100px;
            height: 100px;
            background-color: red;
            color: #fff;
            /* float: left; */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
    </div>
</body>
</html>

如何清除浮动？
清除浮动： clear：none|left|right|both;
设置了float的元素会影响其他相邻元素，需要使用clear清除浮动，clear只会影响自身，不会对其他相邻元素造成影响。

clear:both 用的比较多

clear:left 来清除浮动

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .container{
            width: 500px;
            /* height: 500px; */
            border: 2px solid #333;
        }
        .box01{
            width: 100px;
            height: 100px;
            background-color: blue;
            color: #fff;
            float: left;
            clear: left;
        }
        .box02{
            width: 100px;
            height: 100px;
            background-color: green;
            color: #fff;
            float: left;
            clear: left;
        }
        .box03{
            width: 100px;
            height: 100px;
            background-color: red;
            color: #fff;
            float: left;
            clear:left;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
    </div>
</body>

</html>

清除浮动的常用方法：
方法1：在浮动元素后使用一个空元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .clear{
            clear: both;
        }
        .container{
            width: 500px;
            /* height: 500px; */
            border: 2px solid #333;
        }
        .box01{
            width: 100px;
            height: 100px;
            background-color: blue;
            color: #fff;
            float: left;
        }
        .box02{
            width: 100px;
            height: 100px;
            background-color: green;
            color: #fff;
            float: left;
        }
        .box03{
            width: 100px;
            height: 100px;
            background-color: red;
            color: #fff;
            float: left;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

方法2：给浮动元素的容器添加一个overflow:hidden;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .container{
            width: 500px;
            /* height: 500px; */
            border: 2px solid #333;
            overflow: hidden;
        }
        .box01{
            width: 100px;
            height: 100px;
            background-color: blue;
            color: #fff;
            float: left;
        }
        .box02{
            width: 100px;
            height: 100px;
            background-color: green;
            color: #fff;
            float: left;
        }
        .box03{
            width: 100px;
            height: 100px;
            background-color: red;
            color: #fff;
            float: left;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
    </div>
</body>
</html>

方法3：使用css3的 :after 伪元素。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
    
        .clearfix:after{
            content:'.';
            height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        .container{
            width: 500px;
            border: 2px solid #333;
        }
        .box01{
            width: 100px;
            height: 100px;
            background-color: blue;
            color: #fff;
            float: left;
        }
        .box02{
            width: 100px;
            height: 100px;
            background-color: green;
            color: #fff;
            float: left;
        }
        .box03{
            width: 100px;
            height: 100px;
            background-color: red;
            color: #fff;
            float: left;
        }

    </style>
</head>

<body>
    <div class="container clearfix">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
    </div>
</body>
</html>

方法4：给父级别元素也添加float:left; 也可以消除浮动，但是会产生新的浮动问题，不推荐使用。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .container{
            width: 500px;
            /* height: 500px; */
            border: 2px solid #333;
            float: left;
        }
        .box01{
            width: 100px;
            height: 100px;
            background-color: blue;
            color: #fff;
            float: left;
        }
        .box02{
            width: 100px;
            height: 100px;
            background-color: green;
            color: #fff;
            float: left;
        }
        .box03{
            width: 100px;
            height: 100px;
            background-color: red;
            color: #fff;
            float: left;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
    </div>
</body>
</html>

方法5：给父级别元素定义height,只适合高度固定的布局。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .container{
            width: 500px;
            height: 500px;
            border: 2px solid #333;
        }
        .box01{
            width: 100px;
            height: 100px;
            background-color: blue;
            color: #fff;
            float: left;
       
        }
        .box02{
            width: 100px;
            height: 100px;
            background-color: green;
            color: #fff;
            float: left;
         
        }
        .box03{
            width: 100px;
            height: 100px;
            background-color: red;
            color: #fff;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box01"></div>
        <div class="box02"></div>
        <div class="box03"></div>
    </div>
</body>
</html>