当前位置:网站首页>What is float?What is document flow?Several ways and principles of clearing floats?What is BFC, how to trigger BFC, the role of BFC
What is float?What is document flow?Several ways and principles of clearing floats?What is BFC, how to trigger BFC, the role of BFC
2022-07-31 07:02:00 【Fire orchid】
float
Out of standard document flow, float is the positioning in CSS styleAttribute, used to set the floating layout of label objects (such as:
Standard document flow
- Definition: Content is written from top to bottom, left to right.When the content or position in front changes, the content behind will also change.
- HTML is a document flow of tags, and the location of the content on the web page is related to the order in which we write it.
Classification of elements
Standard document flow divides HTML elements into three types:
1. Inline elements: inline.
2. Block-level elements: block.
3. Inline block element: inline-block.
Difference
Inline element:
- Arranges side by side with other inline elements.
- Cannot set width and height.The default width and height is the height of the content.
- Block-level elements are on a line of their own.
- You can set the width and height.The default paragraph is 100%, and the default height is the height of the content.
BFC
(Block-level formatting context)em>
, is an independent rendering area, let in BFC The inner element is isolated from the outer element, so that the positioning of the inner and outer elements will notinterdependent.Understanding: BFC belongs to a normal flow, which is equivalent to an independent rendering area. BFC is regarded as an attribute of an element. When an element has the BFC attribute, the element canThink of it as an isolated, independent container.Elements inside the container do not affect elements outside the container.
Rules:
- The inner Boxes will be vertically oriented, one by oneplace.
- The vertical distance of the Box is determined by the margin.The margins of two adjacent Boxes belonging to the same BFC will overlap (set according to the maximum margin value)
- The left side of the margin box of each element, with theThe left side of the block border box touches
- The area of the BFC will not overlap the float box.
- BFC is an isolated independent container on the page.Child elements inside the container do not affect elements outside.
- When calculating the height of BFC, floating elements also participate in the calculation
Characteristics and functions of BFC
1, can avoid overlapping margins
2. Clear floating
3. Prevent elements from being covered by floating elements
(Which elements or attributes can trigger BFC)Several ways to clear the float:
- root element
- position: absolute/fixed
- display: inline-block / table
- float !== none
- ovevflow !== visible
边栏推荐
猜你喜欢
随机推荐
Dart入门
ES6-Map、Set与Arrary的转换
磁盘管理与文件系统
数据驱动,
npm install出现node错误
frp内网穿透服务
【博学谷学习记录】超强总结,用心分享 | 软件测试 UnitTest框架
Openssl一键自签证书
Websocket协议解析与QT代码示例
项目练习——备忘录(增删改查)
浅析瀑布流布局原理及实现方式
物联网时代网络安全成第一大关
Oracle 日期函数相关
文本三剑客之e`grep,seq文本编辑工具
选择排序法
银河麒麟v10 sp1 安装 PostgreSQL 11.16
PXE高效批量网络装机
接口报错no message avaliable
Webrtc从理论到实践二: 架构
svn冲突产生原因