首页 > 其他分享 >css clear + bfc

css clear + bfc

时间:2023-04-21 21:23:13浏览次数:54  
标签:bfc 浮动 边界 clear 元素 inline 上下文 css

问题:

没有设置div2的高度,为什么div1的高度 === div2的高度,?

解释:

当应用于浮动元素时,它将底部元素的外边界边缘移动到所有相关的浮动元素外边界边缘的下方。

<div style="float:left;clear: both"></div>

当应用于非浮动块时,它将非浮动块的边框边界移动到所有相关的浮动元素外边界的下方

<div style="clear:both"></div>

要被清除的相关浮动元素指的是在相同块级格式化上下文中的前置浮动

块级格式化上下文是指网页的一部分区域,元素将基于这块元素布局,将内部的内容与外部的上下文隔离开

  1. 有以下特点:
  • 排除外部浮动元素
  • 包含内部浮动元素
  • 防止外边距折叠
  1. 哪些元素可以形成BFC?
  • float: left right 不为none
  • overflow: hidden auto scroll 不为visible
  • display: inline-block table-cell table-caption flex inline-flex grid inline-grid
  • position: absolut fixed
  • 网页的根元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

标签:bfc,浮动,边界,clear,元素,inline,上下文,css
From: https://www.cnblogs.com/tangshidedabenniao/p/17341752.html

相关文章

  • CSS3: 利用分层动画让元素沿弧形路径运动
    译者注:部分代码示例中可以看效果(作者写在博文里面了…),我偷懒把它做成Gif图了。 CSS的animations(动画)和transitions(变换)擅于实现从点A到点B的直线运动,运动轨迹是直线路径。给一个元素添加了animation或者transition以后,无论你如何调整贝塞尔曲线,都无法让它沿着弧形路......
  • CSS 基础拾遗(核心知识、常见需求)
    本篇文章围绕了CSS的核心知识点和项目中常见的需求来展开。虽然行文偏长,但较基础,适合初级中级前端阅读,阅读的时候请适当跳过已经掌握的部分。这篇文章断断续续写了比较久,也参考了许多优秀的文章,但或许文章里还是存在不好或不对的地方,请多多指教,可以评论里直接提出来哈。核心......
  • css样式 进行的瀑布流玩法
    简单归简单布局还是需要自己造的我是创建了n个相同内容就是换图片<divclass="modulee-content-2"><divclass="content-list"><divclass="aaa"v-for="iteminlineDataList":key="item.id"@click="toDetail(it......
  • 一篇文章带你了解css z-index(重叠顺序)
    divcssz-index层重叠顺序div层、span层等html标签层重叠顺序样式z-index,平时CSS使用较少,但也会难免会碰到CSSz-index使用。从基础语法到应用案例教程讲解学习z-index。一、z-index语法与结构z-index跟具体数字div{z-index:100}注意:z-index的数值不跟单位。z-index的数字越高......
  • css 利用 linear-gradient 实现条纹背景
    1.水平条纹背景当给背景设置渐变效果时,默认的渐变方向是垂直由上到下的,效果如下:{background:linear-gradient(#aaa,#ddd);}尝试拉近色标的距离,会发现渐变区域变小了:{background:linear-gradient(#aaa40%,#ddd60%);}当渐变色的色标设置为相同位置时,过渡区......
  • 01-CSS中的非布局样式
    title:01-CSS中的非布局样式publish:true前言CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括:字体、字重、颜色、大小、行高背景、边框滚动、换行装饰性属性(粗体、斜体、下划线)等。这篇文章,我们来对上面的部分样式做一个回顾。边框如何用边框画一个三角形?详见......
  • 02-CSS布局
    title:02-CSS布局publish:true前言常见的布局属性(1)display确定元素的显示类型:block:块级元素。inline:行内元素。inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。(2)position确定元素的位置:static:默认属性值。relative:......
  • CSS的一些小知识
    title:认识Web和Web标准publish:false隐藏盒子的几种方式隐藏盒子,有以下几种方式:(1)方式一:overflow:hidden;//隐藏盒子超出的部分(2)方式二:display:none; 隐藏盒子,而且不占位置(用的最多)比如,点击X,关闭京东首页上方的广告栏。(3)方式三:visibility:hidden;//隐......
  • CSS开发积累
    title:认识Web和Web标准publish:false让flex盒子中的子元素们,居中flex布局常用的三行代码:display:flex;justify-content:center;//子元素在横轴的对齐方式(左右居中)align-items:center;//子元素在竖轴的对齐方式(上下居中)让文字只显示一行,超出显示......
  • CSS文章推荐
    title:认识Web和Web标准publish:false2020-03-16Bootstrap中文文档:https://code.z01.com/v4/content/tables.html2020-03-13CSS实现鼠标悬停弹出微信二维码......