CSS 浮动

CSS 浮动

概述

网页中有很多布局效果，标准流normal flow没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）

浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】

浮动属性

• float

  • left 左浮动

  • right 右浮动

  • float:none 不浮动(默认值)

浮动的基本特性

特性：

1.找父盒子左右边界 遇到浮动元素or行内类型元素立即停止浮动

2.浮动打破标准流状态，形成浮动流

3.浮动元素提升层次 压盖标准流元素 但是不压盖文本流

4.浮动影响单向向下传递

1. 任何类型的元素只要添加浮动属性就不用区分元素类型，变成了并排的块可以设置任何盒模型

   属性

浮动的问题

• 子元素浮动导致父元素高度塌陷(height为0)（本质原因: 浏览器不计算浮动元素高度）

• 影响之后元素的布局

清浮动的方法

解决问题即清除动的方法

• 父元素固定高度法

  • 描述：给浮动元素的父元素固定高度

  • 缺点：不够灵活

  • 代码演示

• 父元素overflow方法

  • 描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现

  • overflow:hidden/scroll/auto 触发BFC盒子的形成

  • 缺点：可能会隐藏内容或触发不需要的滚动条

• 额外标签法

  • 描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式clear:both;

  • clear属性说明

    • 作用：清除浮动

    • 取值

      • left both right

      • 提示通常使用both,

    清除浮动影响的是只能块类型！！

  • 缺点：代码冗余，影响代码可读性

• 伪元素:after

  • 描述：给浮动标签的父标签添加

    .clearfix:after{
         content:"";
         display:block;
         clear:both;
    }
    ​

  • 优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用

伪元素

伪元素作用：用css代码创造元素

语法如下:

 通过伪元素创造两个元素 插入到box盒子的内部 
​
 伪元素都是行内类型！！！
        
        E::after { 创造一个元素插入到E元素的所有内容之后
​
            content:"";//写伪元素文本
​
​
        }
        E::before {创造一个元素插入到E元素的所有内容之前
           content:"";
        }          

滑动门

概述：

为了使各种特殊形状的背景使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，出现了CSS滑动门技术。 最常见于各种导航栏的滑动门

实现要点

• 特殊背景拼合

• 内容自适应

  • 浮动

  • 行内块