前端小白的学习之路2019-10-28

今天学习了浮动float的用法：

1.浮动float控制

(1) 该属性可以使元素脱离文档流，在父容器中进行浮动，停靠到父元素的“内容边界”或其它浮动元素的“边框”，

(2) 浮动的元素会忽略元素间的“空格”，让同样具有该属性的元素“紧密”地排列在一起。

(3) 该属性通常用于处理一些需要紧密排列在一起的“块级元素”，如“导航条”、“相册”，或用于处理“图文混排”等。

该属性有三个允许的值：

none 默认，元素不进行浮动。

left元素从左到右进行浮动。

right元素从右到左进行浮动。

2. 浮动的清除

clear属性设置到父元素上，用于清除子元素浮动给他带来的影响。

它有以下值：

none：默认值，不清楚浮动影响

left：清除左浮动元素带来的影响

right：清除右浮动元素带来的影响

both：清除左右两侧浮动元素带来的影响

代码示例

上述css代码即可消除浮动

3.注意事项

(1) 浮动元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

(2) 当一个元素浮动后，由于脱离标准流了，它后面的元素会占据他的空间，但是后面元素中的内容却只会在浮动元素的边界上（这点和绝对定位的完全脱离文档流不太一样），而不会进行重叠。

(3) 一般浮动元素只会作用到当前行与被他影响的下面行上，上一行的块级元素不会受影响。

(4) 元素一旦被浮动起来，那么他一般都会被作为一个行内块来处理。哪怕他原本是块级元素（不会再占据整行）或者行内元素（可接受宽高设置）

(5) 如果一个父元素的所有子元素全为浮动元素，那么父元素高度会变为0；

被浮动元素在往左（右）移动时，只有遇到父元素的边界，或者另外一个浮动元素的边界时才会停止移动（在同一行内）

---

并且学习一些其他高级选择器的用法，比如：

:root

  该选择器选择HTML页面的根节点元素，也就是标签。该选择符不能选择任何其它HTML文档内的标签，只能单独使用，且优先级高于标签。

:empty

  该选择器会匹配所有，或指定基本选择器内没有元素（没有子节点）的标签元素。

:not(selector) 

  该选择器是用于排除指定元素的选择器。