float，BFC

最新推荐文章于 2024-08-03 17:34:58 发布

会说话的汤姆

最新推荐文章于 2024-08-03 17:34:58 发布

阅读量94

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/sinat_36048532/article/details/112211969

版权

笔记专栏收录该内容

16 篇文章

订阅专栏

在这里插入图片描述

graph TD;
A-->B;
B-->C;![在这里插入图片描述](https://img-blog.csdnimg.cn/20210105083407839.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MDQ4NTMy,size_16,color_FFFFFF,t_70)

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

会说话的汤姆

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css中 float 和 bfc 的理解

weixin_44812997的博客

06-04

659

前言前段时间偶然看到了同学写的一篇博客，是他自己在做聊天室项目时遇到的css浮动相关的问题（点击查看原文章），文章写的很不错，但我感觉讲的还不够全，对于一些新手来说，想要理解可能还比较困难，然后我就感觉就有必要和大家分享一下关于浮动和css的隐藏属性BFC，我会先从文档流开始介绍，以便让大家更好的理解浮动的相关特性。什么是文档流 1、从左至右，从上至下的布局。 2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。理论都过于枯燥，直接上一个简单的例子给大家理解如图所示，

关于BFC和float的一些理解

weixin_39499923的博客

08-01

622

BFC BFC是Block Formatting Context （块级格式化上下文）的缩写我先说一下清除浮动问题。我们都知道有时候要清除浮动，但为什么要清除浮动？我们先看一下代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" content="text/html"> &...

参与评论您还未登录，请先登录后发表或查看评论

float和BFC

weixin_56095898的博客

10-25

106

子元素会保持原来在父级的显示方式，但是会跟随父级浮动到对应位置，（父级的浮动不能被继承）。BFC理解为一个封闭的箱子，箱子内部的元素任何操作，都不会影响到外部元素。二、Block Formatting Contexts (BFC。a.给父元素设置overflow:hidden（触发bfc）；b.在盒子内添加一个块属性设置为clear：both;元素浮动后会脱离正常的文档流，不再占据原来的位置，c.父元素盒子添加 display：flex;给元素添加float属性，d.父元素盒子设置高度（不推荐）

containing block和BFC

小红帽的博客

06-05

614

1、Box Box 是 CSS 布局的对象和基本单位，元素的类型和 display 属性，决定了这个 Box 的类型。比较常见的有： block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context； inline-level box:d

CSS深入浅出float属性以及BFC的应用

AC_greener的博客

04-20

387

float的特性以及float产生的影响？特性:当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。浮动元素碰到包含他的边框，或者浮动元素的边框会停止。浮动元素不在文档流中，会飘在文档流之上. 影响一：当父元素没有设置高度时，父元素的高度塌陷 <div class="parent"> <div class="children"> hello

探究BFC和float

炯炯灯的博客

08-05

351

BFC和float本身其实没什么关系，但是BFC的一个用途是用来清除浮动，所以放在一起了。首先BFC（块级格式化上下文），就算是中文翻译过来也不是很好理解，可以理解为一个独立的渲染空间。这个空间内部的子元素布局不受外部元素的干扰，例如浮动元素，就是一个BFC。说完BFC说float。其实float我现在用的比较少，基本都可以用其他方式实现。刚刚学习css的时候，看到这个元素觉得很神奇，可以...

BFC 解决 Float 乱跑

雾里看花叹朦胧

11-14

178

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC解决Float乱跑</title> </head> <style> .out { min-height: 20px; border: 2px solid red; overflow: hidden;

BFC

一颗苹果

09-10

1384

BFC(Block formatting Context) 块级格式化上下文，布局规则如下： 1.内部的盒子会在垂直方向，一个一个地放置； 2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠； 3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 4.BFC的区域不会...

认识BFC

最新发布

weixin_43929122的博客

08-03

421

介绍BFC（Block Formatting Context）格式化上下文的几种特性

CSS BFC

zxl1990_ok的博客

06-30

242

BFC定义官方文档：块格式化上下文( Block Formatting Contexts, BFC)，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。可以把BFC理解为一个封闭的箱子，箱子里面的元素无论怎么都不会影响到外部。下列方式会创建块格式化上下文：根元素（<html>）浮动元素（..

四种两栏布局自适应｜ float\bfc\flex\absolute

02-18

四种两栏布局｜ 1. float + margin 2. float + bfc 3. flex 4. 父相对子绝对

HTML-bfc初探

08-03

- 浮动元素（`float`属性不为`none`） - 绝对定位元素（`position`属性为`absolute`或`fixed`) - `display`属性值为`inline-block`, `table-cell`, `table-caption`, `flex`, `grid`的元素 - `overflow`属性值不...

10分钟理解CSS BFC原理及其应用

09-27

CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...

bfc的详细介绍以及大总结

01-17

### BFC（Block Formatting Context）的详细介绍与大总结 #### 一、BFC的基本概念 BFC，全称为Block Formatting Context（块级格式化上下文），是CSS中一种特殊的渲染规则，它决定了内部元素如何布局以及与其他...

前端与图形学（上）

sinat_36048532的博客

04-25

999

引言-计算机图形的应用和研究图形：图形是人类传达知识、表达情感的重要手段，它通常指能在人在视觉系统中产生视觉印象的客观对象。抽象=》具体计算机图形（ Computer graphics(CG): ）：计算机图形学中所研究的图形是指能够通过计算机加以表示; WIkpedia: How to represent graphics in computer, compute, processing and display of grafic （如何去表示图形，图元）图形学工程师的范畴 0.1 计算机图形.

请你解释一下CSS中的盒子模型

sinat_36048532的博客

07-31

728

CSS3盒子模型分为: 标准盒子模型怪异盒子模型 flex弹性盒子模型多列布局盒子模型其中标准盒子模型内容的宽高不等于盒子的宽高，盒子的宽高要加上padding，border，和margin。怪异盒子模型宽高就是盒子的宽高。 flex弹性盒子或弹性容器在移动响应式开发中较为常见，是一种当页面需要适应不同的屏幕大小，以及设备类型时确保元素拥有恰当的行为布局时的一种方案。引入弹性盒子模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。 ...

基本选择器属性选择器伪类选择器

sinat_36048532的博客

07-31

451

选择器 houdunren.com @ 向军大叔样式是做用在元素标签上的，通过本章将可以随意查找元素来应用样式。 #基本选择器选择器示例描述 .class .intro 选择 class=“intro” 的所有元素 #id #firstname 选择 id=“firstname” 的所有元素选择所有元素 element p 选择所有元素 element,element div,p 选择所有元素和所有元素 element element div p 选择元素内部的所有元素 el

正则表达式

sinat_36048532的博客

10-18

331

这里写自定义目录标题斜体样式 .正则表达式基本语法两个特殊的符号’^‘和’$’。他们的作用是分别指出一个字符串的开始和结束。例子如下： “^The”：表示所有以"The"开始的字符串（“There”，"The cat"等）； “of despair$”：表示所以以"of despair"结尾的字符串； “^abc$”：表示开始和结尾都是"abc"的字符串——呵呵，只有"abc"自己了； “notice”：表示任何包含"notice"的字符串。象最后那个例子，如果你不使用两个特殊字符，你就在表示要查找