通俗易懂的CSS的常见布局方式以及浮动float详解（小白必看，会有帮助滴）

目录：

1. CSS浮动属性float详解
2. CSS常见页面布局
3. CSS浮动清除和清除浮动的几种方法
4. 高度塌陷的产生条件和解决方法

CSS浮动属性float详解

*首先，我们需要了解什么是浮动？
浮动是指(浮动的特点)：

• 将元素排除在普通流之外，即元素将脱离标准文档流。
• 元素将不在页面占用空间。
• 将浮动元素放置在包含框的左边或者右边。
• 浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 经常使用它来实现特殊的定位效果。

float的属性值有哪些呢？

none       默认值  元素不浮动，并且会显示在其在文本中出现的位置

Left        左浮动

Right       右有浮动

Inherit      规定应该从父元素继承float属性的值

注释：浏览器的支持性：所有主流浏览器都支持float属性

CSS常见页面布局

我们应该知道div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。
1、float浮动布局方式

<!-- 浮动布局 -->
  <section class="layout float">
    <style>
      .layout.float .left {
   
        float: left;
      }
      .layout.float .right {
   
        float: right;
      }
    </style>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h2>这是float布局</h2>
        <p>这是一段文字</p>
        <p>这是一段文字</p>
      </div>
    </article>
  </section>

2、absolute的布局方式

<!-- 定位布局 -->
  <section class="layout absolute">
    <style>
      .layout.absolute .left