java前端div浮动靠左_Python Web全栈之旅09--Web前端●CSS浮动

---

一、浮动(float)

1、float属性

● float默认值为none

● 左浮动(元素靠上靠左)

float:left

● 右浮动(元素靠上靠右)

float:right

---

2、float基本特点

● 当给元素设置float属性后，这个元素的display属性为block

● float元素的包含块和常规流一样，是父元素的内容盒

---

● 盒子尺寸

① 宽度为auto时，适应内容宽度

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

③ margin为auto，为0px

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

---

● 盒子排列

① 左浮动的盒子靠上靠左排列

---

② 右浮动的盒子靠上靠右排列

---

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

常规流块盒.normal在浮动盒子.item前

---

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

常规流块盒.normal在浮动盒子.item后

---

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

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

⑥ 浮动引发的“高度坍塌”问题

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

清除浮动：clear

● 默认值：none

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

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

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

如何解决“高度坍塌”

I、强行增加一个div

II、通过::after实现

---

二、上一集

>>>Python Web全栈之旅08--Web前端●视觉格式化模型