CSS学习笔记（6）【浮动流以及浮动元素相关问题】

CSS基础学习

一、浮动流基本概念

浮动流是一种半脱离标准流的排版方式
浮动流只有水平排版方式，它只能设置某个元素左对齐或者右对齐

注意：（1）浮动流没有居中
（2）在浮动流中是不可以使用margin:0 auto;的
特点：（1）在浮动流中是不区分块级元素、行内元素和行内块级元素的！都可以水平排版
（2）在浮动流中，无论是块级元素、行内元素还是行内块级元素都可以设置宽高
（3）综上，浮动流中的元素和标准流中的行内块级元素很相似

二、浮动元素的脱标：

1.什么是浮动元素的脱标？

“脱标”即脱离标准流
当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样

2.浮动元素脱标后会有什么影响？

如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素

三、浮动元素的排序规则：

1. 相同方向上的浮动元素，先浮动的元素会显示在前面（先来后到）
2. 不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
3. 浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定

四、浮动元素贴靠现象：

1.什么是浮动元素的贴靠现象？

1.如果父元素的宽度能够显示所有浮动元素，那么浮动的元素会并排显示
2.如果父元素的宽度不能显示所有浮动元素，那么会从最后一个元素开始往前贴靠
3.如果贴靠了前面所有的浮动元素之后都不能完全显示，最终会贴靠到父元素的左边或者右边

五、浮动元素字围现象：

1.什么是浮动元素的字围现象？

文字不会被浮动元素盖住，而是会围绕该浮动元素分布，可以利用这一点进行图文混合排版

六、浮动元素高度问题：

（1）在标准流中，内容的高度可以撑起父元素的高度
（2）在浮动流中，浮动元素是不能撑起父元素的高度的

PS：拿到一个很复杂的界面如何入手？

1. 从上至下布局
2. 从外向内布局
3. 水平方向可以现划分为一左一右再对左边或者右边进行进一步布局