2022.09.26

浅浅记录一哈自学web的第八天小笔记吧！

今天学了浮动，咱说这个浮动奥，是真滴强，优缺点一大堆，但还是很方便哒!

（1）.标准文档流：

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

         语法： float

        属性值： left  左浮动

                       right 右浮动

                       none  不浮动（默认值）

(2).

        浮动特性：

                1、可以使块级元素在一行排列

                2、可以使元素脱离文档流

                3、可以提升层级

                4、可以使行内元素设置宽高

(3).

浮动带来的影响：（清除浮动）

            子元素浮动之后会导致父元素高度塌陷

            影响后面元素的布局

(4).清除浮动的办法

方法一： 固定高度法

            给浮动的父元素设置固定高度

            优点：代码简洁

            缺点：不够灵活

 方法二：overflow方法

            给父元素添加overflow属性，overflow不为 visible 默认值，其它值都可以实现

            优点：代码简洁

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

 clear属性： 清除浮动

                取值：left  清除左浮动

                    right  清除右浮动

                    both   两个都清除（通常使用both）

方法三：额外标签法

            在浮动元素的最后加一个空的块级元素，此元素本身不浮动，并且给元素添加清除浮动的属性 clear 属性

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

 方法四：伪元素法

            给浮动元素的父元素添加 clearfix

                .clearfix:after{

                        content: "";为伪元素添加内容

                        display: block; 转为块级元素

                        clear: both;

                }

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

wrap:after{ 默认是行级标签

            content: "";为伪元素添加内容

            display: block; 转为块级元素

            clear: both;        

(5)

两列自适应

        要点：单列定宽、单列自适应

            左列定宽，左侧浮动，右侧需要使用margin-left预留位置

            右侧定宽同理

好啦今天就分享这么多，那么明天见啦！