float浮动入门

文档流

​ 通常聊到浮动都会说浮动元素会脱离文档流，所以我们先了解一下文档流。文档流（normal flow）浏览器默认在页面中摆放元素的方式。浏览器会根据元素在html中的位置从上往下排放元素。此外块级元素会独占一行，行内元素会先从左往右排满一行再进行换行。

float

​ float浮动属性，可以将指定元素沿容器的左侧或者右侧排列，文本和内联元素会围绕浮动元素如下图（初衷就是利用这个特征实现文字围绕图片）。块级元素不会感知浮动元素的存在（利用float布局的一个点）。

1573660663633.png

float元素的位置：

当一个元素被指定为float时，元素会脱离文档流往左或者右进行平移直到碰到父容器的边框或者其他浮动的元素。

.left{
  width:50px;
  height:50px;
  background:red;
  float:left;
}
<div style="width:300px">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat hic odio quisquam quasi at, quia corrupti ut quae, nostrum placeat sed quod architecto nobis dolorem optio. Impedit incidunt illum earum!
  <div class="left"></div>
</div>

1573659045495.png

我们将上面文字减少为lorem后

1573659198197.png

经过上面的观察可以发现，在元素浮动时先将元素转换成行内元素，判断元素所在的行然后进行左右平移直到遇到容器的边框或者其他浮动元素停止的位置就是元素浮动后的位置。所以利用浮动布局时要注意元素的在html中的先后位置。

行内元素的浮动

行内元素浮动将会获得块级元素的特征，可以设置宽高、padding（四个方向）、margin（四个方向）

.float-span {
    width: 48px;
    height: 50px;
    padding: 10px;
    margin: 16px;
    float: left;
    background-color: skyblue;
}

1573623503474.png 1573623521144.png

清除浮动

为什么需要清除浮动：

由于浮动的元素脱离了文档流，浮动元素的父容器或者后方的元素不能感知到它的存在导致父容器的高度不能被撑开、后方元素与浮动元素重叠等问题。

清除浮动的方法：

1、clear属性

2、overflow 设置overflow属性为非visible的值

利用浮动布局

浮动在网页的布局领域广泛应用，下面我们利用浮动简单实现一个三列布局。

例子：布局分为三列，左右两列固定300px宽，中间一列自适应宽度。

aside{
  width:200px;
  height:200px;
}
.left{
  float:left;
  background-color:skyblue;
}
.right{
  float:right;
  background-color:red;
}
.main{
  color:#fff;
  margin:0 200px;
  background-color:black;
}

<section>
  <aside class="left">left aside</aside>
  <aside class="right"></aside>
  <main class="main">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sint ad laudantium suscipit! Mollitia amet, magnam qui, iusto consequuntur debitis ipsum architecto labore deleniti repudiandae iure tempora repellat. Tempora, eveniet.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda eligendi enim, alias animi quia laudantium pariatur quo officia dolores cum explicabo? Facilis possimus tempore porro hic, recusandae sunt ut. Distinctio?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid perferendis earum illo eveniet corrupti, temporibus eligendi impedit quaerat, saepe cupiditate eaque blanditiis harum! Saepe cumque aut explicabo autem exercitationem iusto?</p>
  </main>
</section>

效果：

[图片上传中...(1573659583635.png-31d892-1573661937247-0)]

布局代码

注意点：左右两列的浮动元素在html中要在中间列元素的前面，原因见前面的浮动的定位部分。