CSS浮动

浮动

1. 标准文档流

• 块级元素：独占一行

h1~h6	p	div	列表...

• 行内元素：不独占一行

span	a	img	strong...

行内元素可以被包含在块级元素中，反之，则不可以

2. display

    
    

    
    




div块元素
span行内元素

这个也是实现浮动的一种方式，但是我们通常使用的是float

3. float

左右浮动

    
    
    




    

    

    

    

        浮动的盒子可以向左浮动，也可以向右浮动，只到它的外边缘碰到包含框或者另一个浮动盒子为止
    

div{
    margin: 10px;
    padding: 5px;
}

#father{
    border: 1px solid black;
}

/*浮动float*/
.layer01{
    border: 1px dashed red;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px dashed red;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px dashed red;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px dashed red;
    display: inline-block;
    float: left;
}

4. 父级边框塌陷的问题

clear

/*
clear: right;   右侧不允许有浮动元素
clear: left;    左侧不允许有浮动元素
clear: both;    两侧不允许有浮动元素
clear: none;    可以浮动
*/

解决方案

1. 增加父级元素的高度（不建议使用）

#father{
    border: 1px solid black;
    height: 800px;
}

2. 增加一个空的div标签，清除浮动

    

    

    

    

        浮动的盒子可以向左浮动，也可以向右浮动，只到它的外边缘碰到包含框或者另一个浮动盒子为止
    
    

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3. overflow

overflow:scroll;对超出长宽范围的内容用滚动条

    
    
    




    
    

        路透社8月3日援引英国太阳报消息，根据一项由英国官员核可的协议，字节跳动将把TikTok总部从北京迁至伦敦。太阳报称，字节跳动创始人即将宣布近期内在伦敦成立办公室的意向。该报另称，此举可能让考虑在美国禁止TikTok的美国总统特朗普感到不安。尚未立即联系到TikTok对此事置评。微软周日宣布，将继续就收购中国互联网巨头字节跳动旗下的短视频手机应用TikTok进行磋商，并称计划在9月15日前完成谈判。据卫报7月20日报道，TikTok当时宣布退出将其非中国业务总部设在英国的谈判，将转向爱尔兰都柏林等竞争城市。
    

利用overflow:hidden解决父级边框塌陷的问题

在父级元素中增加一个overflow:hidden

    
    
    




    

    

    

    

        浮动的盒子可以向左浮动，也可以向右浮动，只到它的外边缘碰到包含框或者另一个浮动盒子为止
    

div{
    margin: 10px;
    padding: 5px;
}

#father{
    border: 1px solid black;
    /*此处没有定义宽度和高度，是被内容元素支撑的，因此不会出现父级边框塌陷的问题*/
    overflow: hidden;
}

/*浮动float*/
.layer01{
    border: 1px dashed red;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px dashed red;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px dashed red;
    display: inline-block;
    float: right;
}
/*
clear: right;   右侧不允许有浮动元素
clear: left;    左侧不允许有浮动元素
clear: both;    两侧不允许有浮动元素
clear: none;    可以浮动
*/
.layer04{
    border: 1px dashed red;
    display: inline-block;
    float: right;
    clear: both;
}

4. 父类添加一个伪类：after

在父类后添加一个空的内容，定义为块元素，并使其两侧不允许有浮动元素

好处：避免了空的div标签

#father:after{
    content: '';
    display: block;
    clear: both;
}

小结（重要）

1. 浮动元素后面增加空div

​ 简单，但是代码中应该尽量避免空的div

2. 设置父元素高度

​ 简单，但是当元素假设有了固定的高度，就会被限制

3. overflow

​ 简单，下拉的一些场景应避免使用

4. 父类添加伪类:after（推荐）

​ 写法稍微复杂，但是没有副作用，推荐使用

5. 对比

• display

  方向不可以控制

• float

  浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题