CSS(23) -- (不)完全脱离文档流之(浮动float)absolute

哈哈哈哈多好听
554 阅读2分钟

一. float

<1> float 的特性
  • 被设置了浮动的元素会脱离文档流（但也不是完全脱离，下面也会讲）但是float元素并不是完全脱离文档流，即后面的元素不是可以完全升上去被它压在下面！！！
  • 会影响它周围的元素对其进行环绕！！！（下面会讲，行内/块级元素出现在 float 元素下面的情况）
<2> 浮动元素的不同情况的渲染
(1) 多个浮动元素

此时会按照顺序排下来，不会出现重叠现象

  • 并且处于后面的float元素的顶端不会高于处于前面的float元素的顶端！！
(2) 非浮动元素在前 ，浮动元素在后

float元素的顶端不会高于非float元素的顶端！！！

  • 会看情况进行展示：

        - 如果两个元素都为块级元素，那么就**不会**在一行内显示，两个块级元素无法在一行内显示
    - 但如果把处于上面的元素变为**行内/行内块**元素，就可以在一行显示（如果放得下的话）
(3) 浮动元素在前 ，非浮动元素在后

float元素并不是完全脱离文档流，即后面的元素不是可以完全升上去被它压在下面！！！ ，因为浮动最初是设计用来实现文字环绕图片的效果，如果完全脱离文档流，那岂不是文字会盖住图片！！！

  • 对于位于后面的块级非浮动元素

       - 边框和背景会升上去被它压在下面，但内容会跑到`浮动元素外面`

 <div class="wai">
    <div class="box">
        我是浮动的元素
    </div>
    <div class="bottom">
      我是块级非浮动元素的文本内容 
    </div>
 </div>

.wai{
         height: 500px;
     }
.box{
         float: left;
         width: 300px;
         height: 300px;
         background-color: red;
     }
.bottom{
         width: 200px;
         height: 200px;
         background-color: pink;
     }

2108.png

  • 对于位于后面的行内/行内块非浮动元素，直接就不会升上去，会环绕在它周围

2107.png

2106.png

二. absolute

absolute 会完全脱离文档流，即完全不占位置！！！

2109.png

三. 行内元素脱离文档流会变为块级元素

常见情况：我们给行内元素设置属性 position：absolute/fixed or float：left 之后，就可以给它设置宽高width/height属性了，即此时的宽高width/height属性可以生效了！！！

原因就是因为只有块级元素才能脱离文档流， 当我们使它们脱离文档流时，就会自动把它们转变为块级元素！！！！

avatar
文章
阅读
粉丝