Web前端篇：css浮动

2019-06-13 本文已影响0人子瑜说IT

浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果。
文字环绕现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向外边距</title>
    <style type="text/css">
        html{
            font-size:24px;
        }
        img{
            width:20rem;
        }
        #sep{
            float: left;
        }
        p{
            border:1px solid red;
            text-indent:2rem;
            font-size:1rem;
        }
    </style>
</head>
<body>
    <div id="sep">
        <img src="https://i1.mifile.cn/a4/xmad_15590487108559_JOpcA.jpg" alt="加载失败" title="王源">
    </div>
    <p>
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
    </p>
</body>
</html>

1.浮动属性

css样式表中用float来表示，它有

<meta charset="UTF-8"/>
    <title>浮动属性用法</title>
    <style type="text/css">
        .left{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #fff;
            /*左浮动*/
             float:left;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: green;
            color: #fff;
            /*右浮动*/
             float:right;
        }
    </style>
    <div class="left">左边的盒子</div>
    <div class="right">右边的盒子</div>

2.浮动现象

我们之前说浮动的设计初衷是为了做”文字环绕效果“。那么我们就来看一下如果对盒子设置了浮动，会产生什么现象？
1浮动的元素脱离了标准文档流，即脱标
2浮动的元素互相贴靠
3浮动的元素会产生”字围“效果
4浮动元素有收缩效果

3.浮动的破坏性

浮动之后效果展示：
由此可见，浮动之后，盒子因为脱离了标准文档流，它撑不起父盒子的高度，导致父盒子高度塌陷。如果网页中出现了这种问题，会导致我们整个网页的布局紊乱。我们一定要去解决这种父盒子高度塌陷的问题。
那么如何解决浮动给网页带来的问题？点击领取免费资料及课程

4.清除浮动的方式

我们知道浮动具有破坏性，它能使父盒子高度塌陷、导致页面紊乱。那么在css布局中对于浮动的解决方案有四种：

1.父盒子设置固定高度

给父盒子设置固定高度，缺点不灵活，后期不易维护。应用领域导航栏。

2.内墙法

在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both属性。
clear属性，字面意思就是清除，那么both,就是清除浮动元素对我左右两边的影响。如下示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 800px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .child1{
            width: 200px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .child2{
            width: 300px;
            height: 200px;
            background-color: green;
            float: right;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
<!--内墙法：给最后一个浮动元素的
后面添加一个空的块级标签，并且设
置该标签的属性为clear:both;-->
    <div class="father">
        <div class="child1">A盒子</div>
        <div class="child2">B盒子</div>
        <div class="clear"></div>

    </div>

存在问题：冗余过长。

3.伪元素清除法（推荐使用）

伪元素选择器很简单。就像伪类一样，让伪元素添加了选择器，但不是描述特殊的状态，他们允许您为元素的某些部分设置样式。在这里只介绍一个。
点击领取免费资料及课程

语法：

p::after{
    /*p::after{}一定要有content。表示在p元素内部的最后面的添加内容*/
    content:'...'
}

示例：

 ...
 .clearfix::after{
            content:'';
            display: block;
            clear: both;
            /*visibility: hidden;*/
            /*height: 0;*/
        }

    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="child1">盒子A</div>
        <div class="child2">盒子B</div>

    </div>

4.overflow:hidden

CSS属性overflow定义一个元素的内容太大而无法适应盒子的时候该做什么。它是overflow-x和overflow-y的简写属性

hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            overflow: hidden;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: hidden;

        }
    </style>
</head>
<body>
    <div class="box">
    此处有一篇1万字文章
    </div>
</body>
</html>
#注意：此处内容会被修建，并且其余内容不可见

overflow:hidden||auto|scroll属性之后，它会形成一个BFC区域，我们叫做它为块级格式化上下文。BFC只是一个规则。它对浮动定位都很重要。浮动定位和清除浮动只会应用于同一个BFC的元素。
浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 800px;
            margin: 100px auto;
            border: 1px solid #000;
            /*一旦设置一个Box盒子 除了overflow：visible；
            它会形成一个BFC,BFC它有布局规则： 它会让内部浮动元素计算高度*/
            overflow: hidden;
        }
        .child1{
            width: 200px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .child2{
            width: 300px;
            height: 200px;
            background-color: green;
            /*float: right;*/
            /*overflow: hidden;*/
            float: left;
        }


    </style>
</head>
<body>

    <div class="father ">
        <div class="child1">A盒子</div>
        <div class="child2">B盒子</div>
    </div>



</body>
</html>

5.深入理解BFC：

了解BFC
点击领取免费资料及课程
（1）B: BOX即盒子，页面的基本构成元素。分为 inline 、 block 和 inline-block三种类型的BOX

（2）FC: Formatting Context是W3C的规范中的一种概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

（3）常见的 Formatting Context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)

1.BFC布局：

1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float 元素重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算

2.哪那些元素会生成BFC

1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block
5.overflow不为visible

3.display属性

display属性设置元素如何显示