CSS浮动简介

已于 2024-03-02 23:47:53 修改
阅读量396 收藏 2
点赞数 1
分类专栏： HTML 文章标签： css html css3
于 2022-06-12 10:33:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duke_ding2/article/details/125239655
版权

环境

  • 操作系统：Ubuntu 20.04
  • 开发工具：VSCode 1.67.2
  • 浏览器：Firefox 100.0.2

背景

CSS常见有三种布局方式：

  • 标准流
  • 浮动
  • 定位

本文主要介绍浮动。

先来简单看一下标准流。标准流是基本的布局方式，说白了就是标签按照其默认方式排列。

  • 块元素：独占一行
  • 行内元素和行内块元素：一行可以有多个

要想打破默认的布局方式，一种办法是 display: block | inline | inline-block ，但是用浮动更加灵活方便。

浮动关键字： float: none | left | right

例1：左浮动

        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
........
    <div>1</div>
    <div>2</div>
    <div>3</div>

效果如下：

在这里插入图片描述

div 是块级元素，默认会独占一行，现在加了浮动，三个 div 就处于同一行了（并排靠左）。

注意，这三个盒子之间没有空隙，如果不用浮动而用 display: inline-block ，则也能使得这三个盒子处于同一行，但是盒子之间会有空隙。

注意，如果把浏览器宽度缩小，以至于三个盒子在一行排不开，则会自动转行。

例2：左右浮动

        .left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .right {
            float: right;
        }
........
    <div class="left">Left</div>
    <div class="right">Right</div>

效果如下：

在这里插入图片描述

例3：浮动的盒子不再保留原位置

        .box1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: black;
        }
........
    <div class="box1"></div>
    <div class="box2"></div>

效果如下：

在这里插入图片描述

可见，box1因为浮动，不再保留原位置，所以box2处于原先box1的位置。

注意，box1是浮动的，所以处于上层，也就是说，浮动盒子会覆盖标准流盒子。

例4：浮动盒子具有行内块元素的特点

浮动的盒子具有行内块元素的特点：比如一行内可以有多个元素，可以设置宽高，默认宽度为内容所占宽度，等等。

        span {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        div {
            float: right;
            height: 100px;
            background-color: blue;
        }
........
    <span>span1</span>
    <span>span2</span>
    <div>div1</div>

效果如下：

在这里插入图片描述

  • span 本来是行内元素，因为浮动，就可以设置宽高。
  • div 本来是块元素，不设置宽度的话，默认为其父元素的宽度，因为浮动，变成了默认为其内容所占的宽度了。

例5：浮动盒子只影响其后面的标准流

        div {
            width: 200px;
            height: 100px;
            background-color: blue;
        }

        .flt {
            float: left;
            width: 150px;
            height: 80px;
            background-color: green;
        }
........
    <div>div1</div>
    <div class="flt">div2</div>
    <div>div3</div>
    <div class="flt">div4</div>

效果如下：

在这里插入图片描述

本例中， dev2 和 dev4 是浮动盒子。

  • 因为 dev1 是标准盒子，所以 dev2 会在它下面。
  • 因为 dev2 浮动，所以 dev3 也挨着 dev1 的下面。
  • 因为 dev3 是标准盒子，所以 dev4 会在它下面。

本例中，浮动盒子的高度小于标准盒子高度，如果把浮动盒子的高度增大为 120px ，效果如下：

在这里插入图片描述

注意本例中的 div4 ，它既受 div2 影响，也受 div3 影响。上例中因为 div2 高度小于 div3 ，所以 div4 不受 div2 影响。

注：可以打开浏览器的 Web Developer Tools ，选中 div2 或者 div4 ，然后直接修改其css的值：

在这里插入图片描述

清除浮动

浮动元素经常和标准流的父元素搭配。先用父元素确定位置和宽度，然后在里面采用浮动来排列子元素。现在问题来了，子元素的数量和高度可能会变化，那么该如何确定父元素的高度呢？

如果给父元素的高度设置一个定值，肯定不太好。但如果不设置高度，那也不行（默认是0）。这种情况下，解决办法是根据浮动的子元素自动确定父元素的高度，也就是清除浮动。

清除浮动有以下几种方法：

  • overflow 属性
  • after 伪元素
  • 双伪元素
  • 额外标签法

注：额外标签法是W3C推荐做法，但是因为要改变结构（平白添加网页标签），所以不太常用。

添加 overflow 属性

关键字： overflow: hidden | auto | scroll

        .box {
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .child {
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
........
    <div class="box">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
    </div>
    <p></p>
    <div>end</div>

效果如下：

在这里插入图片描述
注意： overflow 属性设置要加在父盒子上，其值可设置为 hidden 、 auto 或 scroll 。

添加 :after 伪元素

关键字：

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* for IE6 & 7 */
            *zoom: 1;
        }

将其添加在父盒子上即可。

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .child {
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* for IE6 & 7 */
            *zoom: 1;
        }
........
    <div class="box clearfix">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
    </div>
    <p></p>
    <div>end</div>

效果如下：

在这里插入图片描述
注意 <div class="box clearfix"> 的写法。

添加双伪元素

关键字：

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

将其添加在父盒子上即可。

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .child {
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
........
    <div class="box clearfix">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
    </div>
    <p></p>
    <div>end</div>

效果如下：

在这里插入图片描述
注意 <div class="box clearfix"> 的写法。

额外标签法

关键字： clear: both | left | right （一般只用 both ）

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .child {
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }

        .clear {
            clear: both;
        }
........
    <div class="box">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="clear"></div>
    </div>
    <p></p>
    <div>end</div>

效果如下：

在这里插入图片描述
<div class="clear"></div> 是额外添加的空标签，纯粹是为了清除浮动。

注意：该标签必须是块元素。

蓝黑2020
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 关于浮动
09-25
浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。
前端0-9
qianqian0707的博客
07-21 256
人生是用来体验的，不是用来演绎完美的。这句话也许听着很励志，但我们每个人心里都不会只想着一辈子平平淡淡的活着，一个人做出的任何选择都是他在选择自己的未来，哪怕是一个很小的决定，也可能就是这个小决定影响了你的后半生，还有你的人生轨迹，该怎么活，活成什么样，都是看你自己的选择。我们选择开始学习前端，那就一定是对它感兴趣的，不然IT行业各型各色，选择web总不是因为它比其他的相对简单吧，如果有这种想法那你真的是很懦弱的一个人，既然你觉得它简单，你大可以去选择更有挑战性的东西。...
在php中怎样左浮动,div css float浮动用法(left right)
weixin_39678531的博客
03-24 294
div+css中float认识及css float用法，DIV CSS float浮动知识用法与float浮动教程篇Css样式的float浮动属性，用于设置标签对象(如：标签盒子、标签、标签、标签等html标签)的浮动布局，浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。float是什么意思？float是浮动，翻译成中文也是浮动意思。进入对应...
前端开发基础之CSS选择器——浮动
weixin_52626489的博客
05-04 1710
浮动的作用 早期：图文环绕 现在：让垂直布局的盒子变成水平布局 浮动的代码 属性名：float 左浮动：float: left; 右浮动：float: right; 代码如下： <style> .left { width: 100px; height: 100px; background-color: red; /* 设置左浮动 */ float: le
父div 向左浮动 子div 居中_CSS - 浮动属性
weixin_34990449的博客
01-22 1052
好好学习，天天向上一、浮动定义浮动是一种非常重要的布局属性属性名：float，漂流、浮动的意思属性值：left 左浮动 、 right 右浮动作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示示例图：注：中间的间隙是设置了 margin，以便于更好的观察二、浮动的性质Ⅰ、浮动的元素脱离标准流标准文档流特点：区分行块块级元素：可以设置宽高，必须独占一行行内元素：不能设置宽高，可以并排一行浮...
【CSS】悬浮按钮在滚动屏幕时侧边显示的解决方案
学无止境
06-25 923
【CSS】悬浮按钮在滚动屏幕时侧边显示的解决方案
浅谈CSS浮动的特性
09-24
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。这篇文章主要介绍了浅谈CSS浮动的特性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css浮动，左右浮动和去除浮动
11-12
浮动f
css 浮动 理解Float的含义
09-25
css实例教程 理解Float的含义.
CSS 清除浮动Clear
09-25
课程关键词：清除浮动Clear.
CSS浮动
YBZ_CSDN的博客
10-08 289
浮动 视觉格式化模型，大体上将页面中盒子的排列分为三种方式： 常规流 浮动 定位 应用场景 文字环绕 横向排列 浮动的基本特点 修改float属性值为： left：左浮动，元素靠上靠左 right：右浮动，元素靠上靠右 默认值为none 当一个元素浮动后，元素必定为块盒(更改display属性为block) 浮动元素的包含块，和常规流一样，为父元素的内容盒 盒子尺寸 宽度为auto时，适应内容宽度 高度为auto时，与常规流一致，适应内容的高度 margin为auto，为0. 边框、内边距
全面了解CSS“浮动”
qq_43293207的博客
04-02 449
由于浮动元素的脱离文档流，.box2会忽略浮动元素的原空间（即当其不存在），由因为普通div不设置宽度默认会是父元素宽度。普通的块级元素之间的margin-top和margin-bottom有时会出现margin合并的现象，而浮动元素由于其自身会变成一个BFC（块级格式化上下文），不会影响外部元素，所以不会出现margin重叠问题。此时我们发现：没有设置高度的container元素，其实际高度只由标准文档流的box2元素撑起来了21px，而设置了30px高度的浮动元素由于脱离文档流其高度被忽略了。
【CSS】浮动 ② ( 浮动语法简介 | 文字环绕效果 | 左浮动 | 右浮动 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-22 1719
一、浮动语法简介 1、语法说明 2、没有浮动的效果 3、左浮动的效果 4、右浮动的效果 5、右浮动 + 外边距效果 二、完整代码示例
经验分享：CSS浮动(float,clear)通俗讲解
weixin_33714884的博客
03-27 7046
       很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。        前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。        写在前面的话：        由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。        如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你...
CSS选择器
qq_41033768的博客
04-20 276
0、CSS选择器 通用选择器 所有元素都会被选中 *（性能比较低，不推荐；因为部分浏览器会对所有标签进行遍历，从而初始化样式，从而降低浏览器性能） 元素选择器（type selectors） 类选择器（class selectors） id选择器（id selectors） 属性选择器（attribute selectors） 组合 伪类 伪元素 1、属性选择器 拥有某一个属性[att] 属性等于某一个值[att=val] 其它 [attr*=val]：属性值包含某一个val
DevExprees WinForms Diagram Control悬浮提示
friendjoey的博客
12-20 712
为一个在diagramCintrol控件图形展示一个自定义工具提示(悬浮在界面元素上时)，你可以从工具栏中拽一个ToolTipController到界面。然后处理GetActiveObjectInfo事件来传递你的数据到工具提示。比如： diagramControl1.ToolTipController = new ToolTipController(); diagramControl1.ToolTipController.GetActiveObjectInfo += toolTipController1_
Devexpress的DocumentManager关闭浮动窗体时抛异常
weixin_37865822的博客
02-21 1347
Devexpress的DocumentManager关闭浮动窗体时抛异常 如图，这是被我拖拽出的一个浮动窗体，当我点击右上角x关闭按钮时，抛如下异常： 代码如下： private void tabbedView1_DocumentClosing(object sender, DevExpress.XtraBars.Docking2010.Views.DocumentCancelEventAr...
div右对齐_右浮动的原理及规则
weixin_39930671的博客
11-29 1470
Web前端写页面，肯定离不开一种布局，左右布局，左右布局里面，最常用到，也少出问题的就是浮动对齐float/left/right。作为一个资深的老初级前端，别的不敢说，这个浮动我还是摸得很透彻的，前些日子与同事对这个右浮动产生了一些分歧，无法睡服他，也只能写一篇文章来做自我安慰了。首先来说说浮动的概念以及其产生的效果。定义和用法float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文...
css 浮动父级塌陷
最新发布
10-13
CSS浮动会导致父级元素高度塌陷的问题，解决方法有多种，其中一种是使用clearfix清除浮动。 clearfix是一种清除浮动的技术，可以通过在父级元素上添加一个clearfix类来实现。具体实现方式如下： ``` .clearfix::after { content: ""; display: table; clear: both; } ``` 这样就可以解决浮动父级塌陷的问题了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值