浮动相关知识及清浮动方法

最新推荐文章于 2023-11-07 16:47:17 发布

chengangao

最新推荐文章于 2023-11-07 16:47:17 发布

阅读量100

点赞数 1

分类专栏： html css 文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_40664573/article/details/112367688

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS浮动的基本概念，包括元素如何脱离文档流、浮动属性的使用（left、right和none）以及浮动特性。重点讲解了浮动元素导致的父元素高度塌陷问题及其解决方法，涵盖了固定高度、浮动清除、overflow属性和clear:both等常见清浮动技巧。

摘要由CSDN通过智能技术生成

CSS中浮动相关知识

什么是浮动的？

   首先，css定位机制包括：标准流，浮动，定位，这篇主要介绍浮动，至于其他两种，在之后其他文章会提到。
   先了解一下文档流的概念，所谓文档流，就是指文档中可以显示的对象在排列是所占的位置。而浮动就是**使我们的元素脱离正常文档流，按照指定方向发生移动，直到碰到它的父元素边界或另一个浮动元素的边界（浮动是让元素水平方向移动，不能上下移动）**

浮动属性及特性

浮动属性
float:left; 左浮动
float:right; 右浮动
float:none; 不浮动（默认样式）
浮动特性
1.元素加完浮动后脱离正常文档流。
2.会提高元素层级。
3.使块级元素由内容撑开，如果浮动元素宽度之和超过父元素的宽度，会自动折行。
4.使行级元素可以设置宽高。
5.元素浮动不占位，会导致父盒元素高度为0.（高度塌陷，下文会介绍解决方法）

设置浮动元素小实例

设置浮动之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            background-color: blue;
        }
        .right{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">我是子盒1</div>
        <div class="right">我是子盒2</div>
    </div>
</body>
</html>

都是可见的
未设置浮动之前不难看出，div为块级元素，默认宽度撑满整个父元素，高度由内容撑开。
设置浮动之后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left{
            background-color: blue;
            float: left;
        }
        .right{
            background-color: brown;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">我是子盒1</div>
        <div class="right">我是子盒2</div>
    </div>
</body>
</html>

在这里插入图片描述
设置浮动属性之后，块级元素由内容撑开，宽度不再默认撑满父元素。

清浮动方式

上文讲述浮动特性时，提到设置浮动后，会造成父盒子的高度塌陷，变成了0，影响与父盒子同级的其他后续元素的正常布局。那么清浮动的常用方法有哪些呢？下面是我整理的一些清浮动的常用方式以及弊端，各位可根据自身情况选择。
清浮动方法1：给浮动元素父盒子设置固定高

如图：
在这里插入图片描述
优点：简单直接解决问题；
缺点：此方法不够灵活，适用于高度固定的布局。
清浮动方法2：给浮动元素父盒子也添加一个浮动

如图：
在这里插入图片描述

优点：简单直接；
缺点：会产生新的浮动，造成新的高度塌陷。
清浮动方法3：给浮动元素父盒子添加一个overflow属性，属性值可以是 hidden/scroll/auto

如图：
在这里插入图片描述

优点：代码整洁；
缺点：可能会导致内容显示不完全。
清浮动方法4：在浮动元素之后与浮动元素呈现并列关系的位置加上一个空的div（div本身不浮动，没有尺寸），在空的div上加属性：clear:both;

如图：
在这里插入图片描述

优点：通俗易懂，书写方便；
缺点：代码繁多。
清浮动方法5（推荐方法）：给浮动元素的父盒加类名，clearfix,并在.clearfix中添加样式

如图：
在这里插入图片描述

chengangao

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动相关知识及清浮动方法

CSS中浮动相关知识什么是浮动的？浮动属性及特性设置浮动元素小实例清浮动方式什么是浮动的？首先，css定位机制包括：标准流，浮动，定位，这篇主要介绍浮动，至于其他两种，在之后其他文章会提到。先了解一下文档流的概念，所谓文档流，就是指文档中可以显示的对象在排列是所占的位置。而浮动就是**使我们的元素脱离正常文档流，按照指定方向发生移动，直到碰到它的父元素边界或另一个浮动元素的边界（浮动是让元素水平方向移动，不能上下移动）**浮动属性及特性浮动属性float:left; 左浮动
复制链接

扫一扫