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

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

相关推荐
lichenyang45333 分钟前
css模块化以及rem布局
前端·javascript·css
棉花糖超人42 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
Sally璐璐10 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062710 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台10 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿1213810 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
尘心cx11 小时前
前端-CSS-day1
前端·css
全宝12 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔12 小时前
STM32低功耗模式全面指南
css·stm32·css3
拾光拾趣录14 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css