给大家分享html中的一些干货英语(给大家分享html中的一些干货怎么写)

导语：给大家分享HTML中的一些干货

浮动

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

1. 常规流

2. 浮动

3. 定位

应用场景

1. 文字环绕

字体环绕

2. 横向排列

浮动的基本特点

修改float属性值为：

- left：左浮动，元素靠上靠左

- right：右浮动，元素靠上靠右

默认值为none

1. 当一个元素浮动后，元素必定为块盒(更改display属性为block)

2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

1. 宽度为auto时，适应内容宽度

2. 高度为auto时，与常规流一致，适应内容的高度

3. margin为auto，为0.

4. 边框、内边距、百分比设置与常规流一样

盒子排列

1. 左浮动的盒子靠上靠左排列

2. 右浮动的盒子考上靠右排列

3. 浮动盒子在包含块中排列时，会避开常规流块盒

4. 常规流块盒在排列时，无视浮动盒子

5. 行盒在排列时，会避开浮动盒子

6. 外边距合并不会发生

> 如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动，涉及css属性：clear

- 默认值：none

- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方

- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方

- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

本文内容由小滢整理编辑！