CSS学习-浮动及清除浮动

最新推荐文章于 2023-03-28 18:51:44 发布

wanglingli95

最新推荐文章于 2023-03-28 18:51:44 发布

阅读量358

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/wanglingli95/article/details/122333858

版权

一、什么是浮动？

在了解什么是浮动之前我们先了解一下html元素在标准流排列方式。在标准流中，元素是按照它在 HTML 中出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。

常见标准流排版规则：

1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素：从左往右，水平布局，空间不够自动折行

二、浮动的作用

➢ 早期的作用：图文环绕

➢ 现在的作用：网页布局

场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右。

三、浮动的代码

➢ 属性名：float
➢ 属性值：

flaot：left；（左浮动）
flaot：right；（右浮动）

四、浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
• 相当于从地面飘到了空中
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果
• 一行可以显示多个
• 可以设置宽高
➢ 注意点：
• 浮动的元素不能设置text-align:center或者margin:0 auto

五、清除浮动 - 使用 clear

原因：清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题（盒子塌陷）。

1.例如：父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动及清除浮动</title>
    <style>
        .contain{
            border: 2px solid red;
            width: 800px;
        }
        .big{
            width: 500px;
            height: 200px;
            background-color: aqua;
        }
        .small{
            width: 200px;
            height: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
	<div class="contain">
        <div class="big">大盒子</div>
        <div class="small">小盒子</div>
    </div>
</body>
</html>

2.当给里面的两个盒子都加浮动属性：父盒子因为没设置高度，变成一条线，big和small都左浮动并排显示。

总结：

当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线。

清除浮动的方法（最常用的4种）：

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动及清除浮动</title>
    <style>
        .contain{
            border: 2px solid red;
            width: 800px;
        }
        .big{
            width: 500px;
            height: 200px;
            background-color: aqua;
            float: left;
        }
        .small{
            width: 200px;
            height: 100px;
            background-color: blue;
            float:left;
        }
        .clear{
            clear: both;
        }

    </style>
</head>
<body>
	<div class="contain">
        <div class="big">大盒子</div>
        <div class="small">小盒子</div>
        <div class="clear">额外标签方法进行清除浮动</div>
    </div>
</body>
</html>

优点：通俗易懂，方便。

缺点：添加无意义标签，语义化差。

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动及清除浮动</title>
    <style>
        .contain{
            border: 2px solid red;
            width: 800px;
            overflow: hidden;
        }
        .big{
            width: 500px;
            height: 200px;
            background-color: aqua;
            float: left;
        }
        .small{
            width: 200px;
            height: 100px;
            background-color: blue;
            float:left;
        }
        

    </style>
</head>
<body>
	<div class="contain">
        <div class="big">大盒子</div>
        <div class="small">小盒子</div>
    </div>
</body>
</html>

优点：代码简洁。

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

3.使用after伪元素清除浮动（推荐使用）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动及清除浮动</title>
    <style>
        .contain{
            border: 2px solid red;
            width: 800px;
            overflow: hidden;
        }
        .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
        .clearfix{
            *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
        .big{
            width: 500px;
            height: 200px;
            background-color: aqua;
            float: left;
        }
        .small{
            width: 200px;
            height: 100px;
            background-color: blue;
            float:left;
        }
        

    </style>
</head>
<body>
	<div class="contain clearfix">
        <div class="big">大盒子</div>
        <div class="small">小盒子</div>
    </div>
</body>
</html>

优点：符合闭合浮动思想，结构语义化正确。

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

4.使用before和after双伪元素清除浮动（强烈推荐）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动及清除浮动</title>
    <style>
        .contain{
            border: 2px solid red;
            width: 800px;
            overflow: hidden;
        }
        .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            *zoom: 1;
        }
        .big{
            width: 500px;
            height: 200px;
            background-color: aqua;
            float: left;
        }
        .small{
            width: 200px;
            height: 100px;
            background-color: blue;
            float:left;
        }
        

    </style>
</head>
<body>
	<div class="contain clearfix">
        <div class="big">大盒子</div>
        <div class="small">小盒子</div>
    </div>
</body>
</html>

优点：代码更简洁。

缺点：用zoom:1触发hasLayout。