CSS对于浮动的理解

CSS中浮动的理解

通过浮动可以使一个元素向父元素的左侧或右侧移动

通过float属性来设置元素的浮动

浮动的特点

• 浮动元素会完全脱离文档流，部在占据文档流中的位置
• 设置浮动之后元素会向父元素的左侧或右侧移动
• 浮动元素默认不会从父元素移出
• 浮动元素向左或向右不会超过它前面的其他浮动元素
• 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
• 浮动元素不会超过它上边浮动的兄弟元素，最多和他一样高

其他特点

• 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围所以我们可以使用浮动来设置文字环绕图片的效果

• 元素设置浮动之后，将会从文档流脱离，从文档流脱离之后，元素的一些特点会发生变化

• • 块元素不独占页面的一行
  • 脱离文档之后，块元素的宽度和高度默认被内容撑开
  • 脱离文档流之后，就不需要再区分块元素和行内元素

高度塌陷的问题

在浮动布局中，父元素的高度默认是被子元素撑开的

当子元素浮动之后，其会完全脱离文档流，子元素从文档流中脱离

将会无法撑起父元素的高度，导致父元素的高度缺失，父元素高度丢失之后会导致页面布局混乱

解决方法

BFC(Block Formatting Contxt)块级格式化环境

• BFC是CSS中的一个隐含属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域，和其他块不同
• BFC开启后的特点
• • 开启BFC的元素不会被浮动元素覆盖
  • 子元素和父元素的外边距不会重叠
  • 开启BFC的元素可以包含浮动的子元素（解决高度塌陷）

开启方式

1.设置元素浮动（不推荐，会丢失宽度）

2.将元素设置为行内块元素（不推荐，会丢失宽度）

3.将元素的overflow设置为一个非visible的值（常用方式 overflow:hidden）

Clear

作用：清除浮动元素对当前元素所产生的影响

可选值：

• left:清除左侧浮动元素
• right:清除右侧浮动元素
• both:清除两侧中最大影响的那个

原理：

设置清除浮动之后，浏览器会自动为元素添加上一个外边距使其位置不受其他元素影响

使用after伪类解决高度塌陷的问题(无副作用)

::after(元素的最后,行内元素){

display:block;

clear:both

}

clearfix解决高度塌陷和外边距重叠

加上clearfix即可解决高度塌陷和外边距重叠问题