CSS day04 浮动和定位

浏览器在解析html文档时，正常的是从上到下、从左到右解析，这个正常的解析过程，我们叫做正常文档流（标准文档流）。

浮动（float）：就是设置元素相对于body或父元素靠左或靠右摆放，浮动会让元素脱离正常文档流，会让元素不占位置，这个元素就像飞起来了一样，而正常文档流的元素就像在地上，但它不会影响在它前面的标签，但会影响到它后面的元素，会和后面的元素层叠在一起；

代码展示：

浏览器效果：

 

可以看到蓝色（设置了浮动）和绿色的区域层叠到了一起，而红色的区域却没有，浮动可以设置的属性值只有left和right ，如果在一个父元素中设置一个子元素浮动，而父元素未设置宽高的话，这个子元素不会撑开父元素，如果不想浮动的元素影响到后面的元素可以给后面的元素设置：clear：both；属性，在子元素后面添加一个块元素div设置clear：both；属性，不用设置它的其他样式，这样父元素就会被浮动了的子元素撑开

代码展示：

同级元素：

父子嵌套关系：

 

浏览器效果：

同级元素： 

 

父子嵌套关系，因为没有给父元素设置宽高，所以父元素宽度默认是body的宽度，高度是撑开它的子元素的高度：

 

也可以给浮动的元素设置伪类元素，伪类元素设置clear：both；属性 ，这里的伪类元素要设置是最后一个：

代码展示： 

 

浏览器效果：

 

定位（position）：直接设置标签的位置，一般要配合left，right，top，bottom四个属性使用，如果同时设置了left和right默认度取left的属性值，top和bottom默认读取top的值

position的属性值：

position：relative；相对定位，不会让元素脱离正常文档流，是相对于自己原来没设置相对定位的位置进行移动

position：absolute；绝对定位，会让元素脱离正常文档流，根据body或设置了相对定位的父元素进行移动，绝对定位会让元素具有块元素的特点

position：fixed；固定定位，会让元素脱离正常文档流，就是把设置了的元素固定在页面上，不管你页面怎么滚动它都在那里

position：sticky；粘性定位（吸顶/吸底）不会让元素脱离正常文档流，设置了这个属性这个元素就会和离它上面或下面最近的元素粘在一起，没有外边距，但是你可以给它设置外边距

position：static；静态定位，就跟没设置定位一样

代码展示：

 

 

浏览器效果展示：

 

上图可以看到绝对定位和固定定位的元素脱离了正常文档流，层叠在一起了，还影响了后面的元素 

 子绝父相：一种编程思想，就是给子元素设置绝对定位，父元素设置相对定位，子元素绝对定位会根据父元素相对定位来进行移动，因为绝对定位会脱离正常文档流不占位置，所以它怎么设置都不会影响到父元素中其他元素。