<!--<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
<style type="text/css">
.Container{
margin: 30px auto;
width:600px;
height: 300px;
}
.p{
border:solid 3px #a33;
}
.c{
width: 100px;
height: 100px;
background-color: #060;
margin: 10px;
float: left;
}
@keyframes redLamp{
0%{background-color: #999;}
9.9%{background-color: #999;}
10%{background-color: red;}
40%{background-color: red;}
40.1%{background-color: #999;}
100%{background-color: #999;}
}
@keyframes yellowLamp{
0%{background-color: #999;}
39.9%{background-color: #999;}
40%{background-color: yellow;}
70%{background-color: yellow;}
70.1%{background-color: #999;}
100%{background-color: #999;}
}
@keyframes greenLamp{
0%{background-color: #999;}
69.9%{background-color: #999;}
70%{background-color: green;}
100%{background-color: green;}
}
#lamp,#lamp:before,#lamp:after{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #999;
position: relative;
}
#lamp{
margin: 0px auto;
animation: yellowLamp 10s ease infinite;
}
#lamp:before{
display: block;
content: '';
left: -100px;
animation: redLamp 10s ease infinite;
}
#lamp:after{
display: block;
content: '';
left: 100px;
top: -100px;
animation: greenLamp 10s ease infinite;
}
.sector {
width: 0;
height: 0;
margin: 0px auto;
border-width: 50px;
border-style: solid;
border-color: #f00 transparent transparent;
border-radius: 50px;
}
#floatBlockA{
background-color: yellow;
}
#floatBlockB{
background-color: green;
overflow: hidden;
}
#floatBlockC{
background-color: yellow;
display: table;
width: 100%;
}
#floatBlockD{
background-color: green;
}
#floatBlockD:after{
content: " ";
display: block;
clear: both;
}
.floatA{
float: left;
width:100px;
height: 100px;
background-color: red;
}
.floatB{
float: right;
width:100px;
height: 100px;
background-color: red;
}
.floatD{
float: left;
width:100px;
height: 100px;
background-color: red;
}
.clearB{
clear: both;
}
.container{
display: flex;
margin: 30px auto;
width: 100%;
height: 200px;
background-color: yellow;
}
.left{
height: 200px;
flex: 1;
background-color: green;
}
.right{
height: 200px;
width: 300px;
background-color: red;
}
.justify{
height: 200px;
flex: 1;
background-color: blue;
}
.containerA{
width: 100%;
height: 200px;
background-color: yellow;
}
.leftA{
height: 200px;
width: 200px;
float: right;
background-color: green;
}
.rightA{
height: 200px;
margin-right: 200px;
background-color: red;
}
.containerB{
position: relative;
width: 100%;
height: 600px;
}
.center{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
margin: auto;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.containerC{
display: flex;
width: 100%;
height: 600px;
justify-content: center;
align-items: center;
border-top: 1px solid #000;
}
.centerC{
width: 100px;
height: 100px;
background-color: yellow;
}
/** 注意不要给该容器添加width: 100% 属性样式**/
.box{
padding: 20px 200px;
height: 300px;
}
/** 中间盒子 **/
.item1{
background-color: yellow;
width: 100%;
}
/** 左边盒子 **/
.item2{
background-color: blue;
width: 200px;
margin-left: -100%;
right: 200px;
}
/** 右边盒子 **/
.item3{
background-color: blue;
width: 200px;
margin-right: -200px;
}
.colums{
height: 300px;
float: left;
position: relative;
}
/** 双飞翼布局 **/
.bob{
height: 300px;
}
.main{
width: 100%;
background-color: red;
}
.main-inner{
margin: 0px 200px;
}
.sub{
width: 200px;
background-color: blue;
margin-left: -100%;
}
.extro{
width: 200px;
background-color: blue;
margin-left: -200px;
}
.item{
float: left;
height: 300px;
}
</style>
</head>
<body>
<div class="Container">
<div class="p">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
</div>
<div id="lamp"></div>
<div class="sector"></div>
<!-- 解决div容器因为浮动导致的高度塌陷问题-->
<!-- 第一种方法：添加空标签并设置属性为clear: both;
优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的
-->
<div id="floatBlockA">
<div class="floatA"></div>
<div class="clearB"></div>
</div>
<!-- 第二种方法：给父容器添加overflow: hidden属性,实质是触发了BFC
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；
-->
<div id="floatBlockB">
<div class="floatB"></div>
</div>
<!-- 父元素设置 display:table, 触发了BFC
优点：结构语义化正确，代码少
缺点：盒模型属性已经改变。
-->
<div id="floatBlockC">
<div class="floatB"></div>
</div>
<!-- 使用:after伪元素,需要注意的是 :after是伪元素（Pseudo-Element），不是伪类
优点：结构和语义完全正确，代码量居中
缺点：复用方式不当会造成代码量增加
-->
<div id="floatBlockD">
<div class="floatD"></div>
</div>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="justify"></div>
</div>
<div class="containerA">
<div class="leftA">left</div>
<div class="rightA">right</div>
</div>
<div class="containerB">
<div class="center"></div>
</div>
<div class="containerC">
<div class="centerC"></div>
</div>
<!-- 圣杯中-->
<div class="box">
<div class="item1 colums">中间盒子</div>
<div class="item2 colums">左边盒子</div>
<div class="item3 colums">右边盒子</div>
</div>
<!-- 双飞翼-->
<div class="bob">
<div class="main item">
<div class="main-inner">中间盒子</div>
</div>
<div class="sub item">左边盒子</div>
<div class="extro item">右边盒子</div>
</div>
</body>
</html>
