关于浮动的认识

在这之前首先要知道什么是标准文档流

1.在web页面中, 我们无法像设计软件制图一样, 想画哪里就画哪, 这因为web页面制作是一个流, 必须从上而下制作,

2.在web页面制作中, 我们将这种流, 称为标准文档流; 并且还具有一些特征：

a)　空白折叠现象

b)　高矮不齐, 底边对齐

c)　有的标签只有在一行写不下, 才会自动换行

d)　还分有的标签会自动换行

浮动是css中, 从事布局工作的, 使用最频繁的属性

浮动的元素脱标;

脱标就是去除标准文档流的限制, 比如:

1.浮动的元素可以并存一行;

2.并且可以设置宽和高（行内元素也可以）

 ##

浮动的理解:

其实浮动一开始的意义是文本围绕图片，也就是我们常说的文字环绕效果。

我们的理解: 一个元素, 当添加浮动属性, 他就到了上一层画布, 如果是left则往左飘, 但是有一个方向是默认的, 是向上;

一般情况下，如果浮动元素前定义了一个兄弟元素，那么浮动元素换行显示。

浮动脱标, 脱标之后, 就不占有标准文档流的空间,

注意: 一个浮动的标签的结构之前有个标签是标准文档流, 则无论如何, 都不会覆盖该标准文档流标签!

 ##

相同方向的浮动元素会互相贴靠

连续浮动的元素, 只要有足够的空间, 会相互贴靠, 没有足够的空间, 则再起一行

 结构：<div class="father"><div class="box1">box1</div><div class="box2">box2</div></div>

 

<style type="text/css">
    .father{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
    }
    .box1{
        width: 150px;
        height: 50px;
        background-color: orange;
        float: left;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: tan;
        float: left;
    }
</style>

结果如图：

　　　　　　　　

　

浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高

 给一个box里放两个小box，box1（float:left），给box2设置一个margin-top属性，看box1是否会跟随box2下来。

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 300px;
        height: 300px;
        margin: 50px auto;
        border: 1px solid black;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: orange;
        float: left;        
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: tan;        
        margin-top: 10px;

　/*　　没有父元素边框限制，浮动元素会随着一起往下
     　有父元素的限制，浮动元素紧贴着父元素边框，不会往下掉    */
    }
        
</style>

有父元素边框限制→      

　　　无父元素：              没有父元素的限制，box1不能比box2高，所以box1跟随box2下来 

 

 清除浮动的几种方式：

 清除浮动的方式一:

 主动给父盒子添加高度, 这是因为没有高度的父盒子, 是关不住浮动的儿子对其他元素的影响

 但是, 考虑到代码的字节量, 我们基本上不用主动设置父盒子高度

 

　清除方式二:

   clear: both; 使用该属性就可以清楚浮动带来的影响

   clear:both  这个属性写在被影响的父盒子里, 但是有个bug, margin-top失效

 

 清除方式三: 隔墙法(很重要!)

   1.外墙法

  通过增加一个div  并且给这个div添加 clear:both; 属性, 代码示例如下:

　　

div.qiang{

    clear:both;　　
}

 

 

 

   并且能够给这个强添加高度, 去隔开上下两个模块, 但是有bug, 老ie只能解析高度最小为12的盒子, 可以通过设置_font-size: 1px;

 

   2.内墙法

 代码示例如下:  

 　　

<ul>
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
    <div class="qiang"></div>
</ul>

    就是把墙移到了父盒子里

   本质上, 是让父盒子有高度, 就可以管住儿子的浮动给其他元素带来的影响

 

 清除浮动方式四:   overflow:hidden

 

    Overflow:hidden  本意是溢出隐藏, 但是我们在使用的过程中, 发现, 如果给一个盒子添加overflow:hidden属性 那么 这个盒子从此有了高度! 就可以管住儿子的浮动给其他元素带来  的影响

 

 

转载于:https://www.cnblogs.com/miacara94/p/7284551.html