浮动与BFC容器

引言

在网页设计的演进历程中,CSS浮动布局曾是最具革命性的排版技术之一。它打破了传统文档流"从左到右、从上到下"的线性排列方式,让文字环绕图片、多栏布局等复杂排版成为可能。在理解浮动之前,我们先了解一下文档流。

文档流

文档流指浏览器页面默认从左到右,从上到下,排列元素 。在块级作用元素后,若我们之间放入3个块级元素,会发现三个不同颜色方块垂直排列,这也就是文档流效果。

如何让这三个不同颜色的方块在同一水平显示呢。 我们知道块级元素是独占一行,而行内块可以实现元素水平排列让多个元素在同一行显示,所以我们想到行内元素转化为行内块元素:

js 复制代码
     li{
            width: 300px;
            height: 100px;
            display: inline-block; 
        }  
       

注意 :这种方法会产生元素间的空白间隙,这是因为HTML中的换行符和空格被解析为文本节点导致的。 不同块间有白色间距 解决方法有:

  1. 是加父容器 font-size: 0;
  2. 移除HTML标签间的所有空白

行内块方案的局限性

虽然display: inline-block可以解决水平排列问题,但存在以下限制:

  1. 垂直对齐问题 :默认基线对齐,需要额外设置vertical-align

  2. 响应式限制:难以实现自动换行后的复杂排列

  3. 间距控制不便:即使解决了空白间隙,元素间距仍需通过margin精细控制

故为了更高效地实现布局效果,还需一种新的方式,让页面元素的排列与控制更加便捷------浮动。

浮动

基本浮动实现 :使用 float: leftfloat: right 让元素脱离文档流并向左 / 右浮动。 元素浮动后,脱离了文档流,故父容器高度塌陷,高度为0,导致父容器和后续元素重叠。若要实现文字在下一行显示,则需清除浮动。

清除浮动的方法

  1. 可以设置父容器的高度,但是这个受用户的页面宽度影响; -----不推荐
js 复制代码
 .list{
            margin:0;
            padding: 0;
            font-size: 0;
            height: 100px;
        }
  1. 可以在父容器的最后添加一个空div;-----不推荐(每出现一个浮动元素,就要添加一个空的div)
js 复制代码
 <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <div class="clearfix"></div>
    </ul>      
  1. 给被浮动影响的容器设置一个clear both; -----不推荐(问题在哪里就在哪里进行一个解决,如果后续更改代码的时候,不容易出现问题)
js 复制代码
 .title{
            clear: both;
        }
  1. 伪元素清除浮动; -----推荐

    css 复制代码
     .父容器:after {
            content: "";
            display: block;//after是伪元素
            clear: both;
        }
  2. 将浮动元素的父容器设置为BFC容器(下面将会介绍),这样浮动结束之后,就会自动清除浮动

BFC- block formatting context(块级格式化上下文)

  • 是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
  • 具有BFC特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,反之也如此。
  1. 默认情况下,子容器的margin-top会和父容器的margin-top发生重叠
  2. 浮动元素不会被父容器的margin-top所影响
  3. 计算BFC的高度时,浮动元素也参与计算
  4. 解决margin-top重叠问题:
    • 给父容器设置overflow: hidden||auto||scroll||overlay;
    • 给父容器设置一个BFC容器

如何创建BFC容器

scss 复制代码
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为以下其中之一的值:inline-block、table-cell、flex   
- 块级元素overflow(非visible值)

BFC容器的特点

  1. 当容器被设置为BFC容器之后,容器内部的子元素不会在布局上影响到外部的元素,反之也如此。

  2. 计算BFC的高度时,浮动元素也参与计算。

  3. 子元素的margin-top会和父元素的margin-top发生重叠。

  4. 浮动元素不会被父容器的margin-top所影响。

  5. 解决margin-top重叠问题:

相关推荐
江城开朗的豌豆3 分钟前
Vue和React的数据流之争:双向绑定 vs 单向数据流,谁更适合你?
前端·javascript·vue.js
OpenTiny社区7 分钟前
前端可智能识别的搜索组件 SearchBox 使用详解!
前端·vue.js·ui·开源·opentiny
世伟爱吗喽8 分钟前
最新面试题总结
前端·javascript·vue.js
江城开朗的豌豆14 分钟前
前端权限控制实战:手把手教你玩转角色权限分配
前端·javascript·vue.js
超浪的晨26 分钟前
JavaWeb 入门:HTML 基础与实战详解(Java 开发者视角)
java·开发语言·前端·后端·html·个人开发
CCF_NOI.3 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck6 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9496 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_6 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端