HTML-浮动（特点-影响-居中）-定位

浮动（特点-影响-居中）-定位

1 回顾

1. 盒子模型
   1.1 盒子的显示模式
   1.2 盒子模型的组成
   1.3 盒子的内容区域
   1.4 内边距
   1.5 边框
   1.6 外边距
   1.7 溢出内容的显示方式
   1.8 如何隐藏元素


2. 默认样式和继承样式
   元素本身的样式 > 默认的样式 > 继承的样式   


3. 浮动

2 浮动

2.1 浮动的简介

浮动设计的最初想法是为了实现文字环绕图片的效果。

目前浮动成为了前端主流的布局方式。

2.2 元素浮动之后的特点

1. 不论元素原来是行内元素、块级元素还是行内块元素，设置浮动之后，就成了浮动元素，具有浮动元素自己的特性。
2. 浮动元素默认的宽高是被内容撑开，没有内容就没有宽高； 可以通过属性设置元素的宽高。
3. 浮动元素可以完美地设置各个方向的内外边距，且不会有margin的塌陷和合并。
4. 浮动的元素会脱离文档流，多个浮动的元素会水平排列，浮动元素位置如果与不浮动元素重合会显示在上面，不浮动元素中的文本会被挤出。

2.3 浮动元素产生的影响

① 元素浮动之后产生的影响

1. 浮动元素会对后面的兄弟元素产生影响； 后面的兄弟元素会在浮动元素的下面显示导致元素重叠。
2. 浮动元素会被父元素产生影响，无法撑开父元素的高度，导致父元素高度塌陷

② 解决浮动的影响（清除浮动）

解决对后面兄弟元素的影响：

给后面的兄弟元素设置 CSS 属性 clear:both既可

解决对父元素的影响：

1. 方案一：给父元素设置 overflow 属性，值不是 visible 既可。（推荐）

2. 方案二：以浮制浮，给元素也设置浮动； 缺点：父元素浮动之后产生新的影响。

3. 方案三：给父元素设置固定高度，缺点：需要计算父元素高度。

4. 方案四：在所有浮动元素的后面添加元素（父元素的最后一个子元素），给该元素设置属性 clear:both，要求该元素是块级元素。 缺点：需要额外添加元素。

5. 方案五： 利用伪类选择器，给元素动态地创建最后一个子元素，该元素会在所有浮动元素的后面，元素与方案四一致。(推荐)

   父元素::after {
        
       content: "";
       display