CSS浮动Float

目录

CSS浮动

概述

浮动的概念

浮动属性

float

 浮动特性

浮动的影响（为什么要清除浮动）

 清除浮动影响的方法

伪元素

CSS浮动

概述

网页中有很多布局效果，标准流normal flow没有办法完成，使用可以利用浮动改变元素默认的排列方式，解决行内元素，行内块，块+浮动并排。和前期的文字环绕。

浮动的概念

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

浮动属性

float

float:left左浮动/right右浮动/none不浮动(默认的标准流);

float:left 靠近父盒子的左边界排放

float:right 靠近父盒子的右边界排放

每一个并排的盒子都必须写浮动！！！！

 浮动特性

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

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

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

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

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

属性

浮动的影响（为什么要清除浮动）

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

• 影响之后元素的布局

 清除浮动影响的方法

  (1) 给父盒子定高度 (height:npx;)

              缺点:不实际  因为有些父盒子他就不能定高 高度必须是auto

           (2) 利用BFC规则 

               BFC里有一条规则说：如果父盒子是BFC盒子，那么这个盒子里的浮动子元素

               也参与高度计算！！！！

               父盒子+overflow:hidden---父盒子触发成为密闭独立的BFC盒子！！！

               缺点：溢出隐藏的作用会把故意溢出的内容切掉！！！

                        

           (3) 专门创造一个css属性 清除浮动影响

               clear:left清除左浮动/right清除右浮动/both两侧都清

               clear:both;

               浮动气流是单向向下影响的！！！

               缺点：添加空标签  结构繁杂 不清晰的！！！

           (4)拿css代码创造标签插入到最后一个浮动子元素的下面就可以了！！

               css代码确实能创造元素---伪元素法

               .clearfix::after {

                   content:'';

                   display:block;

                   clear:both;

               }

     -->

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

• ie8-不支持双冒号 用单冒号 不考虑兼容性问题那就写双冒号

 <!-- 清除浮动气流！！！clear:both  依附于标签存在  div,span  清除浮动影响必须是块区域！！！ -->

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

伪元素

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

通过伪元素创造两个元素 插入到box盒子的内部 

 伪元素都是行内类型！！！
        
        E::after { 创造一个元素插入到E元素的所有内容之后

            content:"";//写伪元素文本

        }
        E::before {创造一个元素插入到E元素的所有内容之前
           content:"";
        }
           
      

== 注意：==

1. 一个元素只能有两个伪元素 ::aftet ::before

2. 伪元素必须要写content属性

3. 可以写:: 也可以写:

: 针对低版本浏览器(ie8及其以下)

:: 针对是高版本的浏览器

适用场合：与数据没有太大关联 起到修饰作用的小盒子！！