7.19浮动

目录

一、 浮动样式的原理

1、普通文档流

 2、浮动之后的文档流

 3、注意

二.、浮动元素父级高度塌陷

1、解决高度塌陷方法：

2、 补充

---

今天给大家分享一些关于浮动的知识点

一、 浮动样式的原理

1、普通文档流

浏览器在默认情况下规定一个块元素在父元素内的排列规则：

• 从上往下排列

• 从左开始排列

• 一个块元素占一行

<style>
    .parent{width:800px; height:400px; border:10px solid blue;}

    .box1{width:250px; height:80px; background-color:#ed7d31;}
    .box2{width:400px; height:100px; background-color:#70ad47;}
    .box3{width:200px; height:200px; background-color:#7030a0;}
</style>
<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

 2、浮动之后的文档流

<style>
    .parent{width:800px; height:400px; border:10px solid blue;}

    .box1{float:left; width:250px; height:80px; background-color:#ed7d31;}
    .box2{width:400px; height:100px; background-color:#70ad47;}
    .box3{width:200px; height:200px; background-color:#7030a0;}
</style>
<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

下面图片地址

 http://static.zzhitong.com/lesson-files/html/img/9-4.png

 3、注意

若一个元素要浮动，那么它的祖先元素一定要有高度，有高度的盒子才能关住浮动；

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的元素，所以就是清除浮动带来的影响；

浮动的元素不会超过它的上边兄弟元素，最多是一边齐；

若浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移；

浮动的元素不会盖住文字，文字会自动环绕在浮动元素周围。

二.、浮动元素父级高度塌陷

当父级元素没有设置高度时，高度会由文档流内容撑开。

而当子元素浮动之后，脱离了文档流，所以父级高度不会被撑开，这对我们后续的布局结构会造成很多困扰。

1、解决高度塌陷方法：

• 方法1 -- 子元素加clear

  在浮动元素后面加一个空的子元素，并给其CSS属性clear；

  <div style="clear:both"></div>

  clear取值： left 清除左浮动 | right 清除右浮动 | both 清除所有浮动

• 方法2 -- 父元素加宽高

  直接规定父元素的宽高，就不存在塌陷问题了。缺点是，得手动计算合适的宽高，并且扩展性不好。

• 方法3 -- 父元素BFC(Block formatting context)化

  父元素满足下列条件之一即可：

  • 根元素

  • float属性不为none

  • position不为static和relative

  • overflow不为visible（较常用，通常设置overflow : hidden来解决高度塌陷）

  • display为inline-block / table-cell / table-caption / flex / inline-flex

• 方法4 -- 父元素利用伪类after

  当前最主流的方式，利用伪元素，相当于给父级多加了一个子元素，同时我们可以将样式公用，所有需要清除浮动的父元素加上一个相同的class名clear就可以解决：

  .clear{zoom: 1;}/*IE6,7不支持::after伪类，所以没法用下面的代码，这个神奇的zoom可以直接解决IE6,7的清除浮动问题*/
  .clear::after{ content: ""; display: block; clear:both; }

  2、 补充

• 注意：元素浮动之后，不再支持margin:auto，只支持margin确切的值。

• 推荐使用浮动来做横向布局而不是inline-block

  line-block布局的基线对齐处理较为麻烦，浮动不用担心这个问题；

  line-block布局空格会被解析显示在页面中，浮动不用担心这个问题。