HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）

sky.fly2024-11-10 11:30

浮动的相关属性

以下使浮动的常用属性值：

复制代码 
float：	设置浮动
以下属性：
left : 设置左浮动
right : 设置右浮动
none ：不浮动，默认值

clear	清除浮动 清除前面兄弟元素浮动元素的响应	
以下属性：
left ：清除前面左浮动的影响
right ：清除前面右浮动的影响
both ：清除前面左右浮动的影响

元素浮动之后的特点

  • 在上面我们知道了对于浮动的元素，其会脱离标准文档流。

  • 浮动产生的影响：

  1. 脱离文档流。
  2. 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
  3. 不会独占一行，可以与其他元素共用一行。
  4. 不会margin 合并，也不会margin 塌陷，能够完美的设置四个方向的margin 和padding 。
  5. 不会像行内块一样被当做文本处理（没有行内块的空白问题）。

6.当元素浮动之后，下面的元素就可以向上提升位置，占有浮动元素的位置。

解决浮动产生的影响

  • 浮动产生的一些困扰：
  1. 对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
  2. 对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
  • 其实最主要要解决的影响是（父元素高度塌陷），以下是解决方案：
  1. 方案一： 给父元素指定高度。
  2. 方案二： 给父元素设置浮动，带来其他影响。
  3. 方案三： 给父元素设置 overflow:hidden 。
  4. 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear:both
  • 额外标签：谁需要清除浮动就在该元素后面添加一个空白标签，属性设置为：clear:both

  1. 方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动 （推荐使用）

  2. 伪元素 对于其父元素，我们可以给其加上一个类，并对该类进行如下设置：

    .clearfix::after {
    /* 设置添加子元素的内容是空 /
    content: '';
    /     设置添加子元素为块级元素 /
    display: block;
    /     设置添加的子元素的高度0 /
    height: 0;
    /     设置添加子元素看不见 /
    visibility: hidden;
    /     设置clear：both */
    clear: both;
    }

作业

  • 盒子模型

    Document