CSS学习记录(五) ｜ 青训营笔记

是我参与「第四届青训营 」笔记创作活动的的第十天

写在前面

以下是我学习CSS过程中的一些CSS的学习笔记记录,主要目的是用于巩固基础知识，方便日后的回看复习。本节内容主要包含CSS里的浮动的一些相关知识。

浮动概述

• 什么是浮动？
  • 浮动可以改变元素标签默认的排序方式（标准流），让多个块级元素一行内排列显示。相互紧挨的两个块级元素没有空隙，同时也能很容易地让块级元素左排序（左浮动）或者右排序（右浮动）。例如网页顶部的导航栏，我们可以为它里面的块级元素添加浮动，使它们整齐有序地排序。
• 语法格式
  

  选择器 { float: 属性值; }
  

• 属性值
  

  属性值	作用
  none	默认值，元素不浮动
  left	元素向左浮动
  right	元素向右浮动

浮动特性

• 浮动的元素会脱离标准流（脱标）
  • 脱标：脱离标准普通流的控制移动到指定的位置
  • 浮动的盒子不再保留原先的位置，例如会出现浮动元素和块级元素重叠的现象
• 浮动的元素会一行内显示并且元素顶部对齐
  • 浮动的元素互相贴靠在一起，如果父级宽度装不下，多出的盒子会另起一行
  • 浮动的元素会具有行内块元素的特性

清除浮动

• 为什么要清除浮动？
  • 由于浮动元素不在占用原标准流的位置，所以它会对后面的元素排版产生影响，因此把需要浮动的影响闭合起来，只限制到父元素里
• 语法

  选择器 { clear:属性值; }
  

• 属性值
  

  属性值	作用
  left	清除左侧浮动的影响
  right	清除右侧浮动的影响
  both	同时清除左右两侧浮动的影响

• 清除浮动的方法
  • 额外标签法
    • 在浮动元素末尾加上一个空标签，并打上clear
    • 注意：要求这个新的空标签必须是块级元素
  • 父级添加overflow: hidden
    • 该方法无法显示溢出的部分
  • after伪元素
    • 添加位置：父元素添加，相当于额外标签法的升级版
    • 代码

      .clearfix:after {
           content: "";
           displayer: block;
           height: 0;
           clear: both;
           visibility: hidden;
       }
       .clearfix { /* IE6、7 专有 */
           *zoom: 1;
       }
      

  • 双伪元素清除浮动
    • 添加位置：父元素
    • 代码

      .clearfix:before,
      .clearfix:after {
          content: "";
          display: table;
      }
      .clearfix:after {
          clear: both;
      }
      .clearfix {
          *zoom: 1;
      }
      

写在最后

以上便是我的一些学习笔记，若有不足，欢迎指出