CSS3之浮动及其清除

最新推荐文章于 2024-07-17 17:30:59 发布

Programmer.杨

最新推荐文章于 2024-07-17 17:30:59 发布

阅读量415

点赞数 1

分类专栏：前端技术-CSS 文章标签： css float clear 浮动浮动清除

本文链接：https://blog.csdn.net/YWB88888888/article/details/102768908

版权

前端技术-CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

在网页布局中，我们经常要将多个块级元素无间距地排列到一排，从而进行网页布局，而由于块级元素的特性，在一般情况下这种效果不容易实现！因此就要利用浮动特性！！！

网页布局的三种机制

标准文档流：

       在不使用float属性的情况下，页面上的元素 （块级、行内、行内块） 都是标准文档流，他们根据自己的特性各自占据着属于自己的空间
       常用的块级元素： div、hr、p、h1~h6、ul、ol、dl、form、table
       常用的行内元素： span、a、i、em等

浮动：

在使用float属性的情况下，被设置浮动的元素会脱离标准文档流而浮在标准文档流的上面，它在页面上的原有空间会失效，与其相邻的 在它后面的 元素会将此空间占据

定位：

将盒子定在浏览器的某一个位置 （CSS离不开定位，特别是后面的JavaScript特效）

float属性：

概念：
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制进而移动到指定位置
作用：
浮动最早是用来控制图片，实现文字环绕图片的效果的，但在现在多用于让多个盒子水平排列成一行、实现盒子的左右对齐等等，这使得浮动成为布局的重要手段
常用值：

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之布局</title>
    
    <style type="text/css">
        #small {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #big {
            width: 400px;
            height: 400px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div id="small"></div>
    <div id="big"></div>
</body>
</html>

由于 #small 设置了浮动属性，所以浮在标准文档流的上面，它在页面上的原有空间会失效，与其相邻的在它后面的元素会将此空间占据：
在这里插入图片描述

float的三大特点：

漂浮在普通流的上面，脱离标准流，俗称 “脱标”
浮动的块级元素，把自己原来的位置漏给下面标准流的元素
float属性会改变元素display属性，其实任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似

关于float属性的注意事项：

浮动的元素互相贴靠一起的，但是如果父级容器的宽度不足以装下这些浮动的元素，多出的浮动元素会另起一行对齐
浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父容器，这样，最大化的减小了对其他标准流的影响
子元素的浮动参照父元素对齐，不会与父容器的边框重叠，也不会超过父容器的内边距
在一个父级容器中，如果前一个同级元素是浮动的，那么当前元素会与前一个元素的顶部对齐；如果是普通流的，那么当前元素会显示在前一个同级元素的下方
浮动只会影响当前的或者是后面的 标准流元素 ，不会影响前面的标准流
如果一个容器里面有多个子容器，如果其中一个容器浮动，其他同级容器也应该浮动。防止引起问题

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之浮动</title>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #parBox {
            width: 1572px;
            height: 818px;
            margin: 30px auto;
            background-color: rgb(250, 245, 245);
        }
        #lPoster {
            float: left;
            width: 300px;
            height: 818px;
            background-color: yellowgreen;
        }
        #rPoster {
            float: left;
            width: 1272px;
            height: 818px;
        }
        .child1,
        .child2 {
            float: left;
            width: 300px;
            height: 400px;
            margin-left: 18px;
            list-style: none;
            background-color: lightblue;
        }
        .child1 {
            margin-bottom: 18px;
        }
        .child1:hover,
        .child2:hover,
        #lPoster:hover {
            cursor: pointer;
            box-shadow: 0 5px 20px 0 gray;
            transition: 150ms;
            transform: scale(1.02);
        }
    </style>
</head>
<body>
    <div id="parBox" class="show">
        <div id="lPoster" class="show">
            <img src="img/product0.png" alt="这张图片可能有问题！" />
        </div>
        <ul id="rPoster" class="show">
            <li class="child1">
                <img src="img/product1.png" alt="这张图片可能有问题！" />
            </li>
            <li class="child1">
                <img src="img/product2.png" alt="这张图片可能有问题！" />
            </li>
            <li class="child1">
                <img src="img/product3.png" alt="这张图片可能有问题！" />
            </li>
            <li class="child1">
                <img src="img/product2.png" alt="这张图片可能有问题！" />
            </li>
            <li class="child2">
                <img src="img/product3.png" alt="这张图片可能有问题！" />
            </li>
            <li class="child2">
                <img src="img/product1.png" alt="这张图片可能有问题！" />
            </li>
            <li class="child2">
                <img src="img/product3.png" alt="这张图片可能有问题！" />
            </li>
            <li class="child2">
                <img src="img/product2.png" alt="这张图片可能有问题！" />
            </li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

因为父级容器在很多情况下由于内容量不确定，所以不方便给高度，但是子元素浮动不占有位置，无法将父级容器高度撑开，就影响了下面的标准流元素的布局

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之布局</title>
    
    <style type="text/css">
        #small {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #big {
            float: left;
            width: 400px;
            height: 400px;
            background-color: deepskyblue;
        }
        #parentdiv {
            border: 1px solid red;
            width: 700px;
        }
        #underdiv {
            width: 700px;
            height: 100px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="parentdiv">
        <div id="small"></div>
        <div id="big"></div>
    </div>
    <div id="underdiv"></div>
</body>
</html>

在这里插入图片描述

浮动清除

作用：
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流元素

清除浮动的方法：

添加额外标签：

优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之布局</title>
    
    <style type="text/css">
        #small {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #big {
            float: left;
            width: 400px;
            height: 400px;
            background-color: deepskyblue;
        }
        #parentdiv {
            border: 1px solid red;
            width: 700px;
        }
        #underdiv {
            width: 700px;
            height: 100px;
            background-color: black;
            border: 1px solid green;
        }
        
        /* 浮动清除方法一 */
        #box {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="parentdiv">
        <div id="small"></div>
        <div id="big"></div>
        <div id="box"></div>
    </div>
    <div id="underdiv"></div>
</body>
</html>

在父元素上使用overflow属性：

优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之布局</title>
    
    <style type="text/css">
        #small {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #big {
            float: left;
            width: 400px;
            height: 400px;
            background-color: deepskyblue;
        }
        #parentdiv {
            /* 清除浮动方法二  hidden|auto|scroll都可以实现 */
            overflow: hidden;
            
            width: 700px;
            border: 1px solid red;
        }
        #underdiv {
            width: 700px;
            height: 100px;
            background-color: black;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="parentdiv">
        <div id="small"></div>
        <div id="big"></div>
    </div>
    <div id="underdiv"></div>
</body>
</html>

在父元素上使用伪元素:after :（推荐使用）

优点： 符合闭合浮动思想结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发hasLayout

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之布局</title>
    
    <style type="text/css">
        #small {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #big {
            float: left;
            width: 400px;
            height: 400px;
            background-color: deepskyblue;
        }
        #parentdiv {
            width: 700px;
            border: 1px solid red;
    
            /* 兼容IE6，IE7 该属性为IE6和7专有属性 */
            *zoom: 1;
        }
        
        /* 清除浮动方法三 */
        #parentdiv:after {
            height: 0;
            content: "";
            clear: both;
            display: block;
            visibility: hidden;
        }
        
        #underdiv {
            width: 700px;
            height: 100px;
            background-color: black;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="parentdiv">
        <div id="small"></div>
        <div id="big"></div>
    </div>
    <div id="underdiv"></div>
</body>
</html>

在父元素上使用双伪元素 :before & :after :（推荐使用）

优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发hasLayout

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之布局</title>
    
    <style type="text/css">
        #small {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #big {
            float: left;
            width: 400px;
            height: 400px;
            background-color: deepskyblue;
        }
        #parentdiv {
            width: 700px;
            border: 1px solid red;
    
            /* 兼容IE6，IE7 该属性为IE6和7专有属性 */
            *zoom: 1;
        }
        
        /* 清除浮动方法四 */
        #parentdiv:before,
        #parentdiv:after {
            content: "";
            display: table;
        }
        #parentdiv:after {
            clear: both;
        }
        
        #underdiv {
            width: 700px;
            height: 100px;
            background-color: black;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="parentdiv">
        <div id="small"></div>
        <div id="big"></div>
    </div>
    <div id="underdiv"></div>
</body>
</html>

浮动清除后的效果：

在这里插入图片描述

Programmer.杨

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3之浮动及其清除

       在网页布局中，我们经常要将多个块级元素无间距地排列到一排，从而进行网页布局，而由于块级元素的特性，在一般情况下这种效果不容易实现！因此就要利用浮动特性！！！ 网页布局的三种机制标准文档流：       在不使用float属性...
复制链接

扫一扫

专栏目录