浮动的作用和效果

写在前面

CSDN话题挑战赛第1期

• 活动详情地址：CSDN

• 参赛话题：前端面试宝典

• 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
  总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

• 创作模板：

携手共筑前端面试宝典

• 题目一
  • 考点
  • 答案
  • 扩展

题目一

浮动的作用和效果

考点

浮动的作用和效果

答案

浮动的特性：

css浮动是一种使元素脱离普通标准流控制的方法，会使元素向左或向右移动，其周围的元素也会重新排列。

浮动是一种非常有用的布局方式，它能够改变页面中对象的前后流动顺序。这样做的好处是，使得内容的排版变的简单，具有良好的伸缩性。

浮动是css布局非常强大的布局功能，也是理解CSS布局的关键问题所在，在CSS中，包括div在内的任何元素都可以浮动的方式显示。

浮动可以让设置了浮动属性的元素脱离标准普通流的控制，移动到其父元素中指定位置。

举例

使用浮动前html代码：

一个父级div包含5个子级div

<div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
        <div class="son3">son3</div>
        <div class="son4">son4</div>
        <div class="son5">son5</div>
</div>

使用浮动前css代码：

<style>
        .father{
            width: 800px;
            height: 400px;
            background-color: skyblue;
        }
        .father .son1{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .father .son2{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .father .son3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .father .son4{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .father .son5{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
</style>

 使用浮动前效果：

 因为div是块级元素，所以每个div自动换行，垂直排列

 然后为每个子级元素加上 float: left;向左浮动

 网页效果：

五个子级元素依次向左排列浮动，这就是浮动的效果

 

扩展

清除浮动的原因

浮动会使元素脱离普通标准流控制，所以当父级没有高度的时候，会无法撑开父级，导致父级没有高度。父级没有高度，与父级同级的元素就会显示到上面去，因为浮动元素脱离文档流不占据原来的位置。

效果图

黑色的就是与上面例子中天蓝色的父级div的同级，因为父级没有高度，所以没有显示出来，同级的黑色div也显示到上面去了，这个时候就需要清除浮动了

 

写在最后

CSDN话题挑战赛第1期

• 活动详情地址：CSDN