css浮动

浮动

性质1：浮动的元素脱标

脱标即脱离标准流。我们来看几个例子。

证明1：

上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个<div>标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个<div>还在自己的层面上遵从标准流进行排列。

证明2：

上图中，一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。

 

性质2：浮动的元素互相贴靠

我们来看一个例子就明白了。

我们给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：

上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。
如果没有足够的空间靠着1号大哥，3号自己去贴左墙。

不过3号自己去贴墙的时候，注意：

上图显示，3号贴左墙的时候，并不会往1号里面挤。

同样，float还有一个属性值是right，这个和属性值left是对称的。

 

性质3：浮动的元素有“字围”效果

来看一张图就明白了。我们让div浮动，p不浮动。

上图中，我们发现：div挡住了p，但不会挡住p中的文字，形成“字围”效果。

关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

性质4：收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

举例如下：

上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩

 

浮动理论知识总结

1.通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用 float 属性来设置于元素的浮动
可选值：
none 默认值 ，元素不浮动
left 元素向左浮动
right 元素向右浮动
2.注意，元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，
所以元素下边的还在文档流中的元素会自动向上移动

浮动的特点：
1、浮动元素会完全脱离文档流，不再占据文档流中的位置
2、设置浮动以后元素会向父元素的左侧或右侧移动，
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

2.简单总结：
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，
通过浮动可以制作一些水平方向的布局

 

脱离文档流的特点；

脱离文档流的特点：
块元素：
1、块元素不在独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开

行内元素：
行内元素脱离文档流以后会变成块元素，特点和块元素一样

脱离文档流以后，不需要再区分块和行内了

 

高度塌陷的问题

1.高度塌陷的问题：
在浮动布局中，父元素的高度默认是被子元素撑开的，
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！

 

 

 开启BFC

BFC(Block Formatting Context) 块级格式化环境
- BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
- 元素开启BFC后的特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素

- 可以通过一些特殊方式来开启元素的BFC：
1、设置元素的浮动（不推荐）
2、将元素设置为行内块元素（不推荐）
3、将元素的overflow设置为一个非visible的值
- 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

 

 

解决高度塌陷和外边距重叠最终写法，引用clearfix类

1.clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可 */
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}