css开发页面布局重要基础!浮动布局全面了解

浮动(Float)在前端开发中是一个常用的布局技术,它可以让元素脱离文档流并且实现文字环绕、块级元素同行显示以及行内元素设置宽高等效果。同时,浮动元素也会带来一些问题,如外边距重叠和父元素高度塌陷等,因此清除浮动和创建块级格式化上下文(BFC)也是我们需要了解和掌握的知识点。

浮动

  • 脱离文档流 :浮动可以让元素脱离文档流,使得其他元素可以围绕它排列,从而实现文字环绕的效果。
    float:left

使用前:

使用后:

  • 文字环绕:通过浮动,可以让文本围绕在图片或其他浮动元素的周围,实现页面布局的美化和增加交互性。
  • 可以让块级元素同行显示:通过浮动,可以让多个块级元素在同一行上显示,而不是默认的堆叠排列。(如下是使用无序排列对每个排列设置的样式,使用浮动前后的样子)


  • 让行内元素可以设置宽高: 浮动元素可以改变行内元素的默认行为,使其具有设置宽高的能力,从而更好地适应页面布局的需求。

  • 浮动元素可以使用margin(但是不能使用margin:0 auto):浮动元素可以使用margin属性来设置外边距,但是不能使用margin: 0 auto;来实现居中对齐,因为浮动会使元素脱离正常的文档流,无法通过margin: 0 auto;来实现水平居中。

清除浮动

  • 直接给父容器设置高度:通过给包含浮动元素的父容器设置一个固定的高度,可以清除子容器浮动造成的高度塌陷问题(子容器没有高度)。但是这种方法需要提前知道父容器的高度,不够灵活。
  • 增加子容器,在子容器身上清除浮动:在包含浮动元素的父容器内部增加一个额外的子容器,并在子容器上应用清除浮动的样式,例如使用clear: both;这样可以清除掉浮动元素对父容器造成的影响。
  • 借助伪元素after :使用伪元素after在父容器的末尾插入一个空的块级元素,并设置clear: both;可以清除浮动。
  • BFC(Block Formatting Context):BFC是一种块级格式化上下文,可以通过触发BFC来清除浮动。创建BFC的方式包括浮动、定位、行内块、表格单元、overflow属性和弹性盒子等。触发BFC后,浮动元素会被包含在BFC容器内部,从而实现清除浮动的效果。

BFC --Block Formatting Context

  • bfc容器的特征

    1. 块级格式化上下文
    2. 内部盒子会在垂直方向上一一排列,按照文档流的顺序排列。
    3. BFC容器在计算高度时,会将内部浮动的子元素的高度也计算在内,避免高度塌陷问题。
    4. 解决外边距重叠的问题,相邻的两个块级元素的外边距会发生重叠,但是处于不同的BFC容器中的元素的外边距不会重叠。
    5. bfc的效果是让处于bfc内部的元素与外部的元素相互隔离,使内外元素的定位不会互相影响
  • 如何创建bfc

    • 浮动:float:left || right
    • 定位:position:absolute | fixed
    • 行内块:display:inline-block
    • 表格单元:display:table-cell | table-xxx
    • overflow:auto(自适应) | hidden(超出隐藏) | scroll(超出显示滚动条)
    • 弹性盒子:display:flex | inline-flex

以上是关于浮动及清除浮动的一些介绍和方法。如果有具体的示例或更深入的问题,欢迎私信讨论。

相关推荐
Baklib梅梅2 小时前
Ruby大会演讲实录:Baklib 如何用 AI 重构内容管理赛道
ruby on rails·前端框架·ruby
@大迁世界6 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
到底起什么网名才能不重名7 小时前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
wenzhangli77 小时前
从源码到思想:OneCode框架模块化设计如何解决前端大型应用痛点
架构·前端框架
sunbyte8 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
码哥DFS11 小时前
Flex布局原理
前端·css·css3
断竿散人14 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
小飞悟14 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
晴殇i16 小时前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
Liudef061 天前
2048小游戏实现
javascript·css·css3