float布局相关

用户5110918469578
957 阅读4分钟

float布局

1. 概念：

浮动元素会让元素脱离标准流（和绝对定位的元素一样）以达到灵活布局的目的

取值： float：none(默认值) / left/ right

2. 浮动的规则

  1. 脱离标准流

  2. 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止。

    注意：（浮动元素和定位元素之间的层叠关系）： 定位元素会层叠在浮动元素上面

  3. 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

    比如： 行内级元素，inline-block元素、块级元素的文字内容

  4. 行内级元素、inline-block元素浮动之后，其顶部将与所在行的顶部对齐（不会超过当前所在行的高度，不会向上浮动）

  5. 浮动元素不能层叠，如果一个元素浮动，另一个浮动元素已经在那个位置，后浮动的元素将会紧贴着前一个浮动的元素 (左浮找左浮，右浮找右浮)。如果水平方向剩余的空间不够显示浮动元素，浮动元素将会向下移动，直到有足够的空间显示浮动元素

  6. 浮动元素不能超过包含块的顶部，也不能超过之前所有浮动元素的顶部。

3. 浮动的应用场景

  1. 解决行内级元素、inline-block元素之间的空隙 (浮动元素是紧挨着另一个浮动元素的)

  2. 布局，用于页面布局

4 清除浮动

目的： 让父元素计算总高度的时候，把浮动子元素的高度计算在内。

5. margin 的负值

注意：margin-top为负值不会增加高度，只会产生向上位移 margin-bottom为负值不会产生位移，会减少自身的供css读取的高度

​ margin-left和margin-right都是可以增加宽度， 当width为auto时

作用与static元素上（非float元素）的负margin属性 (width固定时)：

当static 元素的margin-top/margin-left被赋予负值时，元素将往指定的方向移动

margin-left/margin-top: -10px; 元素将会向左/上 移10px

但是当margin-right/margin-bottom为负数，元素并不会向右/向下移动，而是将后续的元素拖进来，覆盖本元素。(如果后续没有元素，看起来没有啥变化)

如果width为auto，设定负margin-left/right会将元素拖向对应的方向，并增加宽度

可能的原因： margin-left和margin-top是相对于父元素左上角而言，而margin-right和 margin-bottom是相对元素本身而言，会影响后面元素的位置，当后面有元 素的时候就可以看到效果

/*后续没有元素时设置margin-right负值 */
<style>
    .container{
      width: 1000px;
      background-color: #f00;
      margin: 20px auto;
      height: 380px;
      overflow: hidden;
    }
    .wrap{
      float: left;
      height: 300px;
      width: 1000px;
      background-color: #ff0;
      margin-right: -100px;
    }
  </style>
<div class="container">
      <div class="wrap">
      </div>
    </div>

效果图

/*后续有元素时设置margin-right负值 */  margin-bottom类似
<style>
    .container{
      width: 1000px;
      background-color: #f00;
      margin: 20px auto;
      height: 380px;
      overflow: hidden;
    }
    .wrap{
      float: left;
      height: 300px;
      width: 1000px;
      background-color: #ff0;
      margin-right: -100px;
    }
    .box1{
      width: 300px;
      height: 300px;
      float: left;
      background-color: #0ff;
    }
  </style>
<div class="container">
      <div class="wrap">
      </div>
      <div class="box1"></div>
    </div>

效果图：

可以看到.wrap设置margin-right:-100px; wrap元素凹进去100px,margin负值不会脱离文档流，所以后续box元素认为前面空了100px，就会覆盖wrap元素100px

5.1 用于float布局，当最后一个元素不需要margin时，给元素的包含块设置margin负值

  1. 在包含块的width为 auto 时，包含块的宽度计算公式

width of container block = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

(当包含块的宽度为auto时,border,padding都为0)

包含块的宽度 =margin-left + width + margin-right

包含块的宽度 = margin-left + auto + margin-right 所以当margi-left 或 margin-right为 负值的时候,包含块的宽度就会变大

适用于float布局时去掉最后一个元素的margin-left或margin-right 使得布局元素混乱

一般设置为 .container固定宽度> .wrap(宽度auto)+ 负 margin>需要浮动布局的元素 (在.wrap里设置负margin)

  1. 当包含块的width不为auto时 width of container block < margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

5.2 用于合并元素之间的边框

当每个item都有边框时，中间边框的宽度会重叠，可以设置margin负值使其不重叠

avatar
文章
阅读
粉丝