浮动布局注意事项及其他—day6-下

权泉全
64 阅读4分钟

一、传统网页布局——浮动布局

  • 实际开发中传统的网页布局主要是3块技术完成的，包括标准流布局，浮动布局，定位布局；

标准流布局（文档流布局）

  • 浏览器在渲染显示网页内容时采用的一套排版规则，规定了应该以何种方式排列元素；
  • 块元素： 从上往下，垂直布局，独占一行；
  • 行内元素/行内块元素： 从左往右，水平布局，空间不够会自动折行；

浮动布局

  • 语法：float:浮动模式；
  • 浮动float的取值也就是浮动模式取值有left、right、none；
  • float: left; 左浮动
  • float: right;右浮动
  • float: none; 不浮动

浮动的特点

  1. 浮动的元素脱离标准流，在标准流中不占据位置；
  2. 浮动元素脱标以后，只能影响后面盒子的布局，不会影响前面盒子的布局；
  3. 浮动的元素具有行内块元素的特点；
  4. 元素一行多个显示，但是没有缝隙，并且顶端对齐；
  5. 如果不设置固定的宽，默认的宽度是内容撑开的；
  6. 可以设置宽高和内外边距都生效；

使用浮动布局需要注意事项

  1. 浮动布局的时候一定要配合一个标准流的父级盒子来限制浮动元素的位置；
  2. 如果父元素中的子元素布局的时候，一个浮动了其他的子元素也要浮动，否则会出现问题；
  3. 如果父元素里面的子元素浮动以后，所有的宽度包括margin值加起来大于父盒子的宽度，子盒子会折行另起一行显示；

二、清除浮动

清除浮动的原因

  • 有些情况下父级盒子不能给固定的高度的(比如文章详情页，无限加载的列表页)，父级盒子的高度是内容撑开的,如果子级盒子浮动了，子级盒子就会脱离文档流，导致父级盒子高度不被撑开为0的问题，就会影响下面盒子的显示;

清除浮动属性clear

  • 清除左浮动：clear:left;
  • 清除右浮动：clear:right;
  • 清除两者（常用）：clear: both;

清除浮动方案

1.额外标签法

  • W3C推荐使用，但是我们不推荐使用，因为多出了很多无用的空标签；
  • 找到父级盒子中浮动的最后一个元素，紧跟着书写一个块级盒子设置清除浮动的属性即可
  • image.png

2.父级加overflow属性法（Bfc）

  • 直接在父级盒子的css中添加overflow: hidden;即可开启父级盒子BFC布局模式；

3、使用after伪元素法

  • 伪元素是通过css给页面添加结构标签，但是在html结构中看不到该标签；
  •  ```/*声明清除浮动的样式*/
      .clearfix:after {
          content: "";
          display: block;
        	clear: both;
          /*以下两行是为了兼容低版本ie上面能看见一小条这个元素（不让看见） */
          height: 0;
          visibility: hidden;
      }
  1. after表示在clearfix的双标签盒子的内容后面添加了一个伪元素盒子；
  2. content属性是伪元素必须要书写的属性，哪怕空着也有，空的就书写一个空的英文引号即可；
  3. 伪元素默认的显示默认是为行内元素，所以要转化为块dispaly：block；
  4. visibility: hidden;占位隐藏；
  5. clear: both;清除浮动的影响；
  • 使用方法：谁的子级盒子浮动了，就用调用clearfix类名；
  • image.png

4、使用双伪元素清除浮动

  • ```/*声明清除浮动的样式*/
    .clearfix:before,
    .clearfix:after {
        content: "";
        /* 让伪元素在一行显示 */
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
        /*ie6,7 专门清除浮动的样式*/
    }
  • 使用方法：谁的子级盒子浮动了，就用调用clearfix类名；

三、css的BFC

定义

  • 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
  • BFC是一个独立的布局环境，BFC里面的子元素不会影响外界的元素，所以我们可以用BFC来解决外边距塌陷，外边距合并、清除浮动等问题；

触发BFC

  • 只要元素满足下面任一条件即可触发 BFC 特性：
  1. 浮动元素：float 除 none 以外的值；
  2. 定位元素：position (absolute、fixed)；
  3. display 为 inline-block、table-cells、flex，flow-root，除了block其他基本都是可以触发BFC的；
  4. overflow 除了 visible 以外的值 (hidden、auto、scroll)基本都是可以触发BFC的；
  5. 常用：overflow:hidden; display:flow-root;

display:flow-root

  • 给元素设置display:flow-root，元素都会变成块级元素，同时这个元素会建立新的块级格式上下文（也就是触发了BFC模式）；

四、css书写顺序

  • 建议遵循以下顺序：
  1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）。
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3） ：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
avatar
文章
阅读
粉丝