AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

浮动与清除浮动(已完结)

2018-06-05 922
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

浮动与清除浮动

浮动

  • float属性的取值

float : left | right | none | inherit

默认值 : none

适用于所有元素，没有继承性

  • 浮动框的范围

浮动元素的外边距边界定义了浮动框的大小

  • 浮动元素的包含块是其最近的块级祖先元素，且包含块的大小为该块级祖先元素的内容区

  • 浮动元素的特点

1.浮动元素会脱离标准文档流(这就是为什么浮动元素不能撑开父元素的高，以及浮动元素会覆盖非浮动元素的原因)

2.浮动元素会生成一个块级框，而无论这个元素本身是什么(比如行内元素。因此行内元素一旦浮动，便能够为其设置宽高)

  • 浮动元素的一些行为及规则(仅列出一些常用的)

1.浮动元素不能超出包含块的边界(不包括底边)，这就是为什么多个浮动元素出现在同一水平行时，一旦一行容不下后续的浮动元素，后续的浮动元素会换行的原因

但是，如果浮动元素本身的宽就大于包含块的宽，则允许超出

另外，为浮动元素设置负margin，使其超出包含块也是允许的

2.行内框与一个浮动元素重叠时，其边框、背景、内容都在该浮动元素外显示。块框与一个浮动元素重叠时，其边框、背景在该浮动元素之下显示，而内容在浮动元素之外显示

例如

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1{
            width: 100px;
            height: 100px;
            float: left;
            background-color: red;
        }
        span{
            background-color: blue;
        }
    </style>
    <body>
        <div class='div1'></div>
        <span>qwert</span>
    </body>

这里写图片描述

清除浮动

  • 取值

clear : left | right | both | none | inherit

默认值 : none

适用于块级元素(一定注意)，无继承性

  • 清除浮动的原理

如果元素设置了clear(非none与inherit值)，则用户代理会在元素上外边距的基础上再增加额外的间隔(这个间隔的术语叫‘清除区域’)，以将元素移到浮动框下边界的下面(刚好移到下边界即可)

这就是浮动元素不会覆盖清除浮动元素的原因

怎么使浮动元素也能撑开包含块的高

  • 使包含块也浮动

原理是：浮动元素会延伸，从而包含其所有后代浮动元素

  • 清除浮动
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrapper{
            width: 100px;
            background-color: red;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: orange;
            float: left;
        }
        .flag-clear{
            clear: both;
        }
    </style>
    <body>
        <div class='wrapper'>
            <div class="inner"></div>
            <div class="flag-clear"></div>
        </div>
    </body>

这里写图片描述

只要flag-clear在清除浮动后，逻辑上在inner后面即可，并不用给flag-clear设置大小。撑开的原理就是前面说的——flag-clear的上外边距会增加

  • 伪元素与clear相结合(常用)
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrapper{
            width: 100px;
            background-color: red;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: orange;
            float: left;
        }
        .wrapper::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
    <body>
        <div class='wrapper'>
            <div class="inner"></div>
        </div>
    </body>

ps：本文案参考了以下书籍 
《CSS权威指南》


原文发布时间：2018年06月29日 16:47:17

原文作者：earth_smallma

本文来源CSDN，如需转载请联系原作者

文章标签：
前端开发
行者武松
目录
相关文章
CaptainDrake
|
前端开发
CSS布局：浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CSS布局：浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CaptainDrake
93 0
大树营养快线
|
1月前
|
前端开发
除了伪元素清除法，还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求，在实际开发中，需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
大树营养快线
52 2
__爱吃香菜
谈谈浮动和清除浮动
谈谈浮动和清除浮动
__爱吃香菜
58 0
带你读小助手
|
前端开发 开发者
浮动与清除浮动| 学习笔记
快速学习浮动与清除浮动。
带你读小助手
159 0
浮动与清除浮动| 学习笔记
带你读小助手
|
前端开发 开发者 容器
浮动案例| 学习笔记
快速学习浮动案例。
带你读小助手
133 0
浮动案例| 学习笔记
IT觅语
如何清除浮动的四种方法
清除浮动的四种方法
IT觅语
108 0
赤蓝紫
|
前端开发 容器
清除浮动的四种方式
清除浮动的四种方式
赤蓝紫
138 0
馆主阿牛
|
前端开发
css布局技巧-文字围绕浮动元素巧妙运用
解释 我们前面讲浮动的时候说道浮动的元素会“飞起来”，不占有位置，会破毁标准流，导致浮动的元素下面的标准流会跑到浮动元素的位置被浮动的元素压住，但是，我们之前在浮动那一节说过，浮动产生的目的就是让文字围绕浮动元素的，即浮动的盒子不会压住文字，利用这个特性可以很好的简化某些布局。
馆主阿牛
279 0
css布局技巧-文字围绕浮动元素巧妙运用
学堂小助手
|
前端开发 开发者
浮动 | 学习笔记
快速学习浮动。
学堂小助手
84 0
学堂小助手
|
前端开发 开发者
浮动案例 | 学习笔记
快速学习浮动案例。
学堂小助手
108 0

热门文章

最新文章

  • 1
    天猫精灵开放平台-之小百科测评
  • 2
    语义检索系统：基于Milvus 搭建召回系统抽取向量进行检索，加速索引
  • 3
    3D立方体图片切换动画
  • 4
    模态对话框和非模态对话框
  • 5
    java03
  • 6
    冒泡排序
  • 7
    Windows XP客户端加域操作手册上
  • 8
    微信 6.5.1 for iOS发布 可以在朋友圈分享相册中的视频
  • 9
    Chapter 1: Creating the GUI Form and Adding Widgets
  • 10
    【Mockplus教程】帐号和购买
  • 1
    「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
    34
  • 2
    赋能加速AI应用交付，F5 BIG-IP Next for Kubernetes方案解读
    30
  • 3
    RAG分块策略：主流方法（递归、jina-seg）+前沿推荐（Meta-chunking、Late chunking、SLM-SFT）
    29
  • 4
    Python学习的自我理解和想法（2）
    30
  • 5
    Transformer图解
    36
  • 6
    API安全专题：如何有效应对新型Bot攻击？
    18
  • 7
    Selenium IDE：Web自动化测试的得力助手
    34
  • 8
    《docker高级篇（大厂进阶）：5.Docker-compose容器编排》包括是什么能干嘛去哪下、Compose核心概念、Compose使用三个步骤、Compose常用命令、Compose编排微服务
    51
  • 9
    24/7全时守护：AI视频监控技术的深度实现与应用分享
    43
  • 10
    《docker高级篇（大厂进阶）：6.Docker轻量级可视化工具Portainer》
    27

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月