SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>float</title>
</head>

<body>
<section>
    <label class="title">例1:不占位置,脱离标准流</label>
    <div class="f1-container container">
        <span class="f1"></span>是一些文本。这是一些文本。这是一些文本。
        这是一些文本。<span class="f1">这是</span>一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
    </div>
</section>
<hr>
<section>
    <label class="title">例2:任何元素均可浮动,且可设置宽高一排显示;父亲装不下了,换行显示, 溢出后可以设置overflow;浮动元素压不住父亲的边框和padding</label>
    <div class="f2-container container">
        <span class="f2-box red"></span>
        <div class="f2-box blue"></div>
        <label class="f2-box green"></label>
        <p class="f2-box black"></p>
        <table class="f2-box pink"></table>
        <a class="f2-box yellow"></a>
        <strong class="f2-box purple"></strong>
    </div>
</section>

<hr>
<section>
    <label class="title">例3:浮动导致父元素监听不到子元素的宽高,需要清除浮动,这里采用父元素加伪元素的方式和添加一个专门用于清除浮动的标签的方式或者给父元素加overflow属性,但仅仅推荐使用第一种方式。</label>
    <div class="f3-container container">
        <span class="f3-box red"></span>
        <div class="clear-fix"></div>
    </div>
</section>

<hr>
<section>
    <label class="title">例4:非文本元素浮动</label>
    <div class="f4-container container">
        <span class="f4-box red"></span>
        <span class="f4-box green"></span>
        <span class="f4-box blue"></span>
        <span class="f4-box yellow"></span>
    </div>
</section>

<hr>
<section>
    <label class="title">例5:浮动和绝对定位的对比</label>
    <div class="f5-container container">
        <span>nihao css float fdfasfdf sdfasfsfasdf dsfasdfsdfsdfas sadfsdf</span>
        <span class="f5-box red"></span>
        <span class="f5-box green"></span>
        <span class="f5-box blue"></span>
        <span class="f5-box yellow"></span>
        <span>sdfdsafdsadsadsafdsfsdfsdfdsafasdfsdfsadfsf</span>
    </div>
</section>
</body>
</html>
.title {
    font-weight: bold;
    font-size: 16px;
    font-style: italic;
    display: inline-block;
    margin-bottom: 20px;
}
p {
    margin: 0;
}
.f1 {
	float:left;
	width:1.2em;
	font-size:50px;
	font-family:algerian,courier;
    line-height: 50px;
}
.f2-container {
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,0.1);
    border: 1px solid #ccc;
    padding: 20px;
    overflow: hidden;
}
.f2-box {
    width: 100px;
    height: 100px;
    float: left;
}
.red {
    background: red;
}
.green {
    background: green;
}
.blue {
    background: blue;
}
.yellow {
    background: yellow;
}
.pink {
    background: pink;
}
.purple {
    background: purple;
}
.black {
    background: black;
}

.f3-container {
    background: rgba(0,0,0,0.1);
    border: 1px solid #ccc;
    padding: 20px;
    /* overflow: hidden; */
}
.f3-box {
    float: left;
    width: 100px;
    height: 100px;
}
.f3-container::after,
.f3-container::before {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.clear-fix {
    height: 0;
    clear: both;
    display: block;
}

.f4-container {
    width: 400px;
    height: 400px;
    margin: 10px auto;
    border: 1px solid red;
}

.f4-container .f4-box {
    display: block;
    width: 100px;
    height: 100px;
}

/* red浮动后,green,blue,pink马上补上了red失去的空间 */
.f4-container .red {
    float: left;
    height: 50px;
}

/* 浮动元素会按照浮动方向依次紧密相接 */
/* 绝对定位,会堆叠在相对父元素的同一个位置 */
.f5-container {
    width: 400px;
    height: 400px;
    margin: 10px auto;
    border: 1px solid red;
}

.f5-container .f5-box {
    display: block;
    width: 100px;
    height: 100px;
    /* float: left; */
    position: absolute;
}