css04 float

最新推荐文章于 2024-08-07 14:19:47 发布
最新推荐文章于 2024-08-07 14:19:47 发布
阅读量87 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41225951/article/details/125945538
版权

浮动元素 BFC 高度塌陷 清除浮动 CSS布局
关键词由CSDN通过智能技术生成

title: CSS04 FLOW
date: 2022-07-21 00:09:16
tags: Flow 浮动

浮动介绍和特性

基本特性

​ 1.浮动元素就是脱离了文档流，不再占据文档流的位置
​ 2.浮动元素有三个值 none left right none就是没脱离 left是向左，right是向右
​ 3.浮动元素永远不会从父元素中脱离
​ 4.水平方向浮动元素永远都会在它前面的元素的右面，不会超过前面元素
​ 5.垂直方向浮动元素也永远都不会超过，最多就是平齐
​ 6.浮动元素前面有块元素的时候，无法超过块元素

<!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>
        /* 1.浮动元素就是脱离了文档流，不再占据文档流的位置
           2.浮动元素有三个值 none left right none就是没脱离 left是向左，right是向右
           3.浮动元素永远不会从父元素中脱离
           4.水平方向浮动元素永远都会在它前面的元素的右面，不会超过前面元素
           5.垂直方向浮动元素也永远都不会超过，最多就是平齐
           6.浮动元素前面有块元素的时候，无法超过块元素
        */
        .box{
            height: 200px;
            width: 200px;
            background-color: brown;
            float: none;
        }
        .box1{
            height: 200px;
            width: 200px;
            background-color: bisque;
            float:left;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: red;
            float:left;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: black;
            float:left;
        }
    </style>
</head>
<body>
    <span>span</span>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>
</html>

其他特性

1.浮动元素不会盖住文字，可以利用浮动来设置文字环绕图片的效果

2.浮动元素浮动脱离文档流之后，不再遵循文档流特性

​ 块元素：1.块元素不再独占页面的一行

​ 2.脱离之后块元素的高度和宽度撑开

​ 行内元素：脱离之后就和块元素性质一样了

<!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>
        .box1{
            height:200px;
            width: 200px;
            background-color: bisque;
            float:left;
        }
        .box2{
            background-color: red;
            float:left;
            height:200px;
            width: 200px;
            
        }
        .box3{
            height:200px;
            background-color: #bfa;
        }
        span{
            width:200px;
            height:200px;
            background-color: #bfa;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>陌生的街

        鸽子的幽冥
        
        希伯来人如此称呼傍晚的开始
        
        此刻阴影尚未把脚步阻挡
        
        而黑夜的来临被察觉
        
        如期待中的一曲音乐，
        
        不是作为我们本质上无足轻重的一个象征。
        
        在那个光线微暗如沙的时辰
        
        我的脚步遇到一条不认识的街道，
        
        开向那高贵而宽阔的平台，
        
        在屋檐与墙亘间展现出
        
        温柔的色彩，仿佛那天空本身
        
        正在把背景震撼。
        
        一切——简朴房舍的真诚的平凡，
        
        矮柱和门环的戏谑，
        
        阳台上也许是一位少女的希望——
        
        深入我空虚的心
        
        有着一滴水的清澈。
        
        也许正是那唯一的时辰
        
        以魔力抬高了那条街道，
        
        赋予她温柔的特权，
        
        令它真实如一个传说或一行诗；
        
        无疑我感到了它远远地临近
        
        仿佛回忆，它精疲力尽
        
        只因是来自灵魂的深处。
        
        亲切而又刻骨铭心的
        
        是明朗街道的奇迹
        
        而只是在往后
        
        我才明白那地方与我无关，
        
        每一间房舍都是一台烛台
        
        芸芸众生在烛台上燃烧着孤单的火焰，
        
        而我们不假思索的每一步
        
        都在迈过别人的各各他。
        陌生的街

        鸽子的幽冥
        
        希伯来人如此称呼傍晚的开始
        
        此刻阴影尚未把脚步阻挡
        
        而黑夜的来临被察觉
        
        如期待中的一曲音乐，
        
        不是作为我们本质上无足轻重的一个象征。
        
        在那个光线微暗如沙的时辰
        
        我的脚步遇到一条不认识的街道，
        
        开向那高贵而宽阔的平台，
        
        在屋檐与墙亘间展现出
        
        温柔的色彩，仿佛那天空本身
        
        正在把背景震撼。
        
        一切——简朴房舍的真诚的平凡，
        
        矮柱和门环的戏谑，
        
        阳台上也许是一位少女的希望——
        
        深入我空虚的心
        
        有着一滴水的清澈。
        
        也许正是那唯一的时辰
        
        以魔力抬高了那条街道，
        
        赋予她温柔的特权，
        
        令它真实如一个传说或一行诗；
        
        无疑我感到了它远远地临近
        
        仿佛回忆，它精疲力尽
        
        只因是来自灵魂的深处。
        
        亲切而又刻骨铭心的
        
        是明朗街道的奇迹
        
        而只是在往后
        
        我才明白那地方与我无关，
        
        每一间房舍都是一台烛台
        
        芸芸众生在烛台上燃烧着孤单的火焰，
        
        而我们不假思索的每一步
        
        都在迈过别人的各各他。
        陌生的街

        鸽子的幽冥
        
        希伯来人如此称呼傍晚的开始
        
        此刻阴影尚未把脚步阻挡
        
        而黑夜的来临被察觉
        
        如期待中的一曲音乐，
        
        不是作为我们本质上无足轻重的一个象征。
        
        在那个光线微暗如沙的时辰
        
        我的脚步遇到一条不认识的街道，
        
        开向那高贵而宽阔的平台，
        
        在屋檐与墙亘间展现出
        
        温柔的色彩，仿佛那天空本身
        
        正在把背景震撼。
        
        一切——简朴房舍的真诚的平凡，
        
        矮柱和门环的戏谑，
        
        阳台上也许是一位少女的希望——
        
        深入我空虚的心
        
        有着一滴水的清澈。
        
        也许正是那唯一的时辰
        
        以魔力抬高了那条街道，
        
        赋予她温柔的特权，
        
        令它真实如一个传说或一行诗；
        
        无疑我感到了它远远地临近
        
        仿佛回忆，它精疲力尽
        
        只因是来自灵魂的深处。
        
        亲切而又刻骨铭心的
        
        是明朗街道的奇迹
        
        而只是在往后
        
        我才明白那地方与我无关，
        
        每一间房舍都是一台烛台
        
        芸芸众生在烛台上燃烧着孤单的火焰，
        
        而我们不假思索的每一步
        
        都在迈过别人的各各他。</p>
    <div class="box2"></div>
    <div class="box3">box3</div>
    <span>span</span>
</body>
</html>

高度塌陷问题的解决方案

高度塌陷的问题：

​ 在浮动布局中，父元素的高度默认是被子元素撑开的，但是子元素完全从文档流中脱离，导致父元素高度丢失。

​ 父元素高度丢失之后，下面的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中常见的问题，必须要处理。

BFC

基本特点

BFC(Border Flexing Context)：当为元素设置BFC时，就可以理解为他们形成了一个独立的区块，BFC变成了一堵墙，隔离开了其他的各种元素。元素设置BFC时有三个特点：

  1. 元素设置BFC后，不会被浮动元素影响改变自己的布局
  2. 设置BFC后，父元素和子元素的外边距不再重合在一起，解决了父子元素的外间距折叠问题
  3. 设置BFC后，可以包含浮动元素

设置方式

BFC有三种设置方式：

  1. float:left 让父元素也一起浮动起来

    不建议使用，因为这样的话只是父元素可以被撑开而已，下面的元素还是会自动上移，而且父元素适配页面的宽度会丢失。

  2. display:inline-block 转换为行内块元素

    不建议使用，因为父元素适配页面的宽度会丢失

  3. overflow:hidden 设置一个除了visible以外的值

    建议使用

特点举例

三个特点分别举例：

特点1

开启之后不会被浮动元素覆盖

<!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>
        /*  1.开启之后不被浮动元素覆盖：box2原来会被box1覆盖，现在不会了  
        */
        .box1{
            height: 200px;
            width: 200px;
            background-color: antiquewhite;
            float: left;
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: aquamarine;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
   
</body>
</html>
特点2

父元素和子元素的外边距不再重叠

<!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>
        /*  2.开启之后父元素和子元素的外边距不再重叠：box2原来设置margin，box1会跟着一起向下，现在不会了
        */
        .box1{
            height: 200px;
            width: 200px;
            background-color: antiquewhite;
            overflow:hidden;
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: aquamarine;
            margin:10px;
        }
    </style>
</head>
<body>
    <div class="box1">
    	<div class="box2"></div>
    </div>
</body>
</html>
特点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>
        /*  3.可以包含浮动元素：box1原来不会被box2撑开，现在会了，而且box1原本的width会被保留。
        */
        .box1{
            background-color: antiquewhite;
            overflow:hidden;
        }
        .box2{
            height: 100px;
            width: 100px;
            float:left;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box1">
    	<div class="box2"></div>
    </div>
</body>
</html>

clear

基本特点

设置clear元素之后，可以让该块免受浮动元素的影响

三个属性：left，right，auto

left：减去左边浮动元素影响

right：减去左边浮动元素影响

auto：减去最大影响

原理

自动设置一个上外边距

高度塌陷最终解决方案

因为clear是自动设置一个上外边距，那么如果我们想要去除影响的话，可以给被影响高度塌陷的父元素最下面加一个块类子元素，再让该块类子元素不受之前所有浮动元素的影响，那么，该子元素就会增加一个上外边距，从而将高度塌陷的父元素撑开。

<!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>
        .box1{
            background-color: antiquewhite;
        }
        .box2{
            height: 100px;
            width: 100px;
            float:left;
            background-color: aquamarine;
        }
        /*  最下面加一个块类子元素，再让该块类子元素不受之前所有浮动元素的影响，那么，该子元素就会增加一个上外边距，从而将高度塌陷的父元素撑开。*/
        .box3{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="box1">
    	<div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

但是，现在的问题是，我们在html中加入了一个新的div块，相当于改变了页面结构而非样式，这样就非常不健康。所以我们可以利用css中的伪元素::after，在父元素的最后一行加一个空内容，让这个空内容免受之前的影响。注意，伪元素是行内元素，需要转换为块。

<!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>
        .box1{
            background-color: antiquewhite;
        }
        .box2{
            height: 100px;
            width: 100px;
            float:left;
            background-color: aquamarine;
        }
         /*  利用css中的伪元素::after，在父元素的最后一行加一个空内容，让这个空内容免受之前的影响。注意，伪元素是行内元素，需要转换为块。*/
        .box1::after{
            content:'';
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="box1">
    	<div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

伪类解决父子外边距重叠问题

在父边距的第一行加个空table，隔开父元素和子元素

<!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>
        .box1{
            height: 200px;
            width: 200px;
            background-color: antiquewhite;
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: aquamarine;
            margin:20px;
        }
        .box1::before{
            content:'';
            display:table;
        }
    </style>
</head>
<body>
    <div class="box1">
    	<div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

添加clearfix类，用伪类同时解决父子外边距和高度塌陷问题

.clearfix::before, .clearfix::after{

​ content:" ";

​ display:table;

​ clear:both;

}

如果哪个父元素出现了高度塌陷和父子外边距问题，直接在类名中加上clearfix即可

<!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>
        .box1{
            background-color: antiquewhite;
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: aquamarine;
            margin:20px;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: aquamarine;  
        }
        {
            content:'';
            display:table;
        }
          /* clearfix类 */
        .clearfix::before, .clearfix::after{
            content:"";
            display:table;
            clear:both;
}
    </style>
</head>
<body>
      /* box1加入clearfix */
    <div class="box1 clearfix">
    	<div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>
霄雨Blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css设置float,【CSS】float属性
weixin_29271053的博客
08-03 1398
float浮动属性1、作用:将页面元素浮动起来，使其能够向左或者向右排列2、应用:实现页面中布局的左右排版实现图文环绕的版式效果3、值：4、原理:浮动元素将脱离默认的文档流，漂浮在默认文档流之上浮动的元素会向左或向右移动，直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止普通文档流可以看作是一个X、Y轴的平面流，float浮动流可以看到是一个Z轴上的立体流，Float浮动流离眼睛更...
css中float用法
yuqu1028的博客
06-13 3619
设置两个div1，div2相邻盒子左浮动时，div1与div2在同一行，div2在div1的右侧。但当宽度超过一行的限制时，div2会默认转到div1的下一行。 看代码： 效果如图所示： 此时div1靠近右侧边沿，div2跟随在div1后面当div1设置浮动而div2未设置浮动时，div2会有一部分被div1覆盖掉并且div2占据页面左上角，此时div2是处于标准流之中如图所示： 反之当div1未设置浮动div2设置左浮动，即div1处于标准流，则div2将会另起一行紧贴在div1的下面如图所示：
CSS浮动（float）
热门推荐
屈帅波的技术博客
05-26 1万+
一 传统网页布局的三种方式 网页布局的本质：用 CSS 来摆放盒子，把盒子摆放到相应位置。 CSS 提供了三种传统布局方式（简单说就是盒子如何进行排列）。 普通流（标准流） 浮动 定位 这里指的只是传统布局，其实还有一些特殊高级的布局方式。 二 标准流（普通流/文档流） 所谓的标准流：就是标签按照规定好的默认方式排列。 块级元素会独占一行，从上向下顺序排列。 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式
css float布局
ximingx
01-19 6261
CSS float 布局
css中float的使用
qq_46025885的博客
08-02 781
float的使用
css中float使用条件,css中float什么意思
weixin_35582019的博客
08-03 820
CSS中的float表示的是浮动，当元素设置了float属性就会脱离标准流，浮动在其他元素上，它会根据属性值向左或者向右浮动CSS中的float属性是一个频繁用到的属性，对于初学者来说，如果没有理解好浮动的意义和表现出来的特性，在使用的使用很容易陷入困惑，云里雾里，搞不清楚状态。接下来将在文章中为大家详细介绍这一属性，希望对大家有所帮助。float属性float，顾名思义就是浮动，设置了float...
css float
AIALOG的博客
05-02 867
css，css float
CSS Float 浮动布局
blog
07-13 3019
文章目录前言一、Float 布局二、属性值三、代码实现clear 清除浮动clear 属性值三、Float 设计初衷与不足不足总结 前言 在页面开发的过程中，CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等，本文将从浮动布局开始学习。 一、Float 布局 把一个元素“浮动”(float)起来，会改变该元素本身和在正常
深入研究 CSSfloat属性
分享身边生活经验blog
10-13 1734
CSSfloat是一种定位属性，它将元素放置在其容器的左侧或右侧，并允许内联元素环绕它。过去，float它因被滥用于页面布局而声名狼藉。这导致一些开发人员质疑它现在是否已弃用，还是应该完全避免！CSSfloat仍然是相关的。我们应该在正确的上下文中使用它！本文讨论了 CSS 浮动的历史，并展示了float可用于现代网页设计的几种方法，以实现创意文本布局和令人惊叹的设计元素。
CSS样式 float浮动用法
m0_54889555的博客
02-02 1562
CSS样式 float浮动用法 前言 Css样式的float浮动属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、标签等<em>htmlL标签）的浮动布局，浮动就是标签对象浮动居左靠左（float：left）和浮动居右靠右（float：right）。 float的作用 通过css定义float（浮动）让div样式，向左或者向右浮动。 float语法 float常跟随的属性值：left、right、none float none：不使
css浮动 float属性详解
11-21
【CSS浮动(float属性)详解】 一、浮动的概念 浮动（float）是CSS布局中的一个重要概念，它使得元素能够脱离正常文档流，向左或向右移动，直至其边框接触到包含框或另一个浮动元素的边框。这个特性最初设计是为了...
css float 解析学习
09-25
CSS Float 是一种布局技术，用于指定元素在页面上的位置方式，使其可以从正常文档流中脱离，并允许其他元素环绕它。这个属性最初设计用于处理图像与文本的布局，但后来被广泛应用于创建复杂的网页设计。`float` 属性...
老生常谈css中float的用法
09-24
CSS中的`float`属性是一个非常基础且重要的布局工具，它被广泛用于创建多列布局、对齐元素以及处理内容环绕等场景。本文将深入探讨`float`的用法及其在实际设计中的应用。 首先，`float`属性允许元素在当前行内浮动...
css float left布局换行不正常问题的解决
09-22
主要介绍了css float left布局换行不正常问题的解决的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端HTML总结
m0_54066656的博客
08-05 943
前端笔记，HTML标签详解。
剖析HTML 元素——WEB开发系列02
最新发布
一条晒干的咸鱼的博客
08-07 797
HTML元素是构成HTML文档结构的基本单位，定义了页面上的不同部分和内容。HTML元素可以包含不同类型的内容，如文本、图片、链接、表格等，每种元素都有其特定的用途和语义。通过组合和嵌套不同的HTML元素，可以创建复杂的网页结构和布局。一、HTML 元素语法HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容...
前端面试宝典【HTML篇】【6】
BDawn的专栏
08-05 269
canvas标签是 HTML5 中引入的一个新元素，它提供了一个矩形区域，可以在其中绘制图形或图像。canvas 本身并不具备绘图能力，它只是一个容器，所有的绘图工作都需要通过 JavaScript 来完成。 svg标签是用于定义可缩放矢量图形 (Scalable Vector Graphics, SVG) 的容器。SVG 是一种基于 XML 的图形格式，它允许开发者创建高质量的矢量图形，这些图形可以无限放大而不失真。SVG 图形不仅支持静态图像，还支持动画和交互式图形。
Html实现全国省市区三级联动
qq_36973384的博客
08-02 526
关键技术：SpringBoot、Html、Jquery、js、ajax在网上找到的资料都比较乱，对于初学者来说，可能不太友好。以前，我刚开始学习Html的时候，也搞不清楚这个要怎么做，找了好久的资料都没法实现，就算是实现了，也没有完整的教程，现在实现了，整理好了，就想分享一下给每一位热爱编程的小伙伴。
前端（HTML + CSS）学成在线项目（仿）
li3123537691的博客
08-06 553
头部区域 + banner区域 + 精品推荐区域，这三个区域都是版心居中。头部区域分为：logo + 导航 + 搜索 + 用户四个小块。banner区域分为：左侧导航 + 背景图 + 右侧课程表。HTML（index.html）代码。精品推荐课程区域（版心居中）鼠标悬停 :hover效果。鼠标悬停 :hover效果。鼠标悬停 :hover效果。数据分析师区域（版心居中）编程入门区域（版心居中）
css的float用法
06-08
CSS的float属性用于指定一个元素应该浮动到其容器中的哪一侧，可以是左侧或右侧。float属性常用于实现文本环绕图片或创建多列布局。具体用法如下： ``` float: left; /* 将元素向左浮动 */ float: right; /* 将元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值