CSS—浮动

最新推荐文章于 2022-12-18 14:15:00 发布

木木学长

最新推荐文章于 2022-12-18 14:15:00 发布

阅读量165

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_43599049/article/details/115034256

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1 传统网页布局的三种方式

CSS提供了三种传统布局方式：

标准流（普通流/文档流）
浮动
定位

标准流（普通流/文档流）
所谓的标准流就是标签按照规定好默认方式排列：

块级元素会独占一行，从上向下顺序排列
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

2 浮动

（1）什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘：

    <style>
        .a1,
        .a2 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
    </style>

在这里插入图片描述

（2）浮动特性

加了浮动之后的元素，会具有很多特性：

浮动元素会脱离标准流，浮动的盒子不再保留原先的位置
浮动的元素会一行内显示并且元素顶部对齐
浮动元素会具有行内块元素的特性

（3）清除浮动

思考：我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点都是有高度的，但是必须所有父盒子都必须有高度吗？
理想中的状态：让子盒子撑开父亲，有多少孩子父盒子就有多高。
如果子元素不加浮动，父元素没有高度则会把父元素撑开：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a2 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .a3 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        
        .a1 {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="a1">
        <div class="a2"></div>
        <div class="a3"></div>
    </div>

</body>

</html>

如果子元素添加浮动：
在这里插入图片描述

为什么需要清除浮动？

由于父盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置，所以他会对后面的元素排版产生影响。

清除浮动的本质

清除浮动的本质就是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

清除浮动

语法：
选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

我们实际工作中，几乎只用clear:both; 清除浮动的策略是：闭合浮动

清除浮动方法

额外标签法，也称隔墙法是W3C推荐的做法
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

（1）额外标签法

额外标签法会在浮动元素末尾添加一个空的块级标签，例如<div style=“clear:both”></div>

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .a2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .a3 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        
        .a1 {
            border: 1px solid black;
        }
        
        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="a1">
        <div class="a2"></div>
        <div class="a3"></div>
        <div class="clear"></div>
    </div>

</body>

</html>

（2）父级添加overflow属性

给父级添加overflow属性，将其属性值设置为hidden、auto或scroll

优点：代码简洁
缺点：无法显示溢出的部分

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .a2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .a3 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        
        .a1 {
            border: 1px solid black;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="a1">
        <div class="a2"></div>
        <div class="a3"></div>
    </div>

</body>

</html>

（3）父级添加after伪元素

:after方式是额外标签法的升级版，也是给父元素添加：

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

.clearfix:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{/*IE6 7专有*/
	*zoom:1;
}

（4）父级添加双伪元素

也是给父元素添加：

.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{/*IE6 7专有*/
	*zoom:1;
}

木木学长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS—浮动

1 传统网页布局的三种方式CSS提供了三种传统布局方式：标准流（普通流/文档流）浮动定位标准流（普通流/文档流）所谓的标准流就是标签按照规定好默认方式排列：块级元素会独占一行，从上向下顺序排列行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。2 浮动（1）什么是浮动float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘： <style> .a1, .a2 {
复制链接

扫一扫