css基础-学习css 08 float浮动的使用

前言

浮动float可以理解为，让内容信息中默认的流式布局（水平布局）在横向排列展示。以便可以更好地调整布局。

float实例

<h1>Simple float example</h1>

<div class="box">Float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet.
</p>

<p>
  Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
  orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
  ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
  ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
  a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

 正常这样编写的css，应该是一层一层的展示，展示玩h1信息，展示div标签，再按水平顺序展示p标签内容；

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

 使用float浮动；

.box {
  float: left;  //这里让他在左侧展示
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

呈现效果如下：

 

 浮动元素，会脱离正常的文档布局流，并展示到他的父容器的左边。

关于浮动的层级

在第一个p标签中，添加class='special';

<p class='special'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet.
</p>

将.box修改成 ；

.box {
  float: left;
  margin: 15px; //修改四面margin距离
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}
//添加
.special {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}

效果：可以看到浮动展示在文档流special样式之上；因为浮动的元素已经被移除正常文档流了。

清除浮动

如果不想让这个浮动印象到，下面的两个p标签内容样式；

在前例的 HTML 代码中，向浮动元素下方的第二个段落添加 cleared 类，然后向 CSS 文件中添加以下样式：

.cleared {
  clear: left;
}

效果： 

 

• left；可以停止左浮动；
• right；可以停止右浮动；
• both；可以停止左右两侧浮动；

float浮动浮动元素周围的盒子

        实例

改变你的文档结构，使得第一个段落与浮动的盒子共同处于类名为 wrapper 的 <div> 元素之下。

<div class="wrapper">
  <div class="box">Float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>
//......剩下的两个p标签

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
}
//移除
//.cleared {
// clear: left;
//}

效果

 这是因为，浮动元素位于文档流之外，停止紧随其后元素的浮动并不像之前那样奏效。

所以当我们想，让第一段p标签和div浮动内容在一起展示，再让后面的内容从盒子中清除浮动的方法，又以下3种。

1、clearfix

等效于我们声明clear:both；

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

效果： 

2、overflow

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

效果：

 

3、display: flow-root

这是一种比较现代的方案，在使用没有副作用！

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}

效果：