2020-07-20

CSS学习-关于页面布局中浮动总结

一.浮动
可以使一个元素向其父元素的左侧或者右侧浮动，设置浮动后会使该元素从文档流中脱离，不占用文档流中的页面布局设计。
语法：float： ；
可选值：none 为默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
特点：
1.设置浮动后元素会向父元素的左侧或者右侧移动
2.浮动默认不会从父元素中移出
3.浮动元素向左向右移动时不会超过其他浮动的元素
4.若浮动元素上面无浮动的元素，则浮动元素无法上移
5.浮动元素不会超过它上边的浮动的兄弟元素，最多一样高
6.浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，用于设置文字环绕图片的效果。
7.元素的特点会发生变化
缺点：浮动会有高度塌陷的问题，在浮动布局中，父元素高度默认被子元素撑开，当子元素浮动后，脱离文档流，会无法撑起父元素高度，导致父元素的高度丢失，导致页面混乱。
解决方法：
1.给父元素写高度，但是不能够根据文字来改变数据的大小
2.BFC（块级格式化环境）
3.使用.after伪类
二.BFC
BFC是CSS中一个隐含属性，可为一个元素开启BFC，变成独立的布局区域
特点：
1.开启后元素不会被浮动元素所覆盖
2.开启后元素的子元素和父元素外边距不会重叠
3.开启后父元素可以包含浮动的子元素
通过特殊方式开启元素的BFC：
1.设置元素的浮动，但是会使其从文档流中脱离（不推荐）

<style>
        .out{
            /*父元素*/
            border: brown 10px solid;
            float:left;
        }
        .in{
            /*子元素*/
            width:100px;
            height: 100px;
            background-color: chocolate;
            float:left;
        }
    </style>

2.将元素设为行内元素，不适合用于外部的布局（不推荐）

<style>
        .out{
            /*父元素*/
            border: brown 10px solid;
            display:inline-block;
        }
        .in{
            /*子元素*/
            width:100px;
            height: 100px;
            background-color: chocolate;
            float:left;
        }
    </style>

3.将元素的overflow设为一个非visible的值

<style>
        .out{
            /*父元素*/
            border: brown 10px solid;
            overflow: hidden;
        }
        .in{
            /*子元素*/
            width:100px;
            height: 100px;
            background-color: chocolate;
            float:left;
        }
    </style>

三.使用.after伪类解决高度塌陷问题
用结构问题解决表现问题，需要在父类中加一个子类，然后清除上一子类对其的影响加一个clear:both;

<style>
        .out{
            /*父元素*/
            border: brown 10px solid;
        }
        .out::after{
            content:"";
            clear:both;
            display:block;
        }
        .in{
            /*子元素*/
            width:100px;
            height: 100px;
            background-color: chocolate;
            float:left;
        }
    </style>

四.总结
浮动可用于制作水平方向的布局