案例
<body>
<div id="app" class="clearfix">
<div id="app1" class="item1">
HELLO WORLD!!
</div>
<div id="app2" class="item2">
HELLO WORLD!!
</div>
<div id="app3" class="item3">
HELLO WORLD!!
</div>
</div>
<div id="div">
<div id="div1" class="tenm1 clearfix">
<p>HELLO WORLD!!</p>
</div>
</div>
<div class="list">
<p>暮sè里，小镇名叫泥瓶巷的僻静地方，有位孤苦伶仃的清瘦少年，</p>
<p>此时他正按照习俗，一手持蜡烛，</p>
<p>一手持桃枝，照耀房梁、墙壁</p>
<p>、木床等处，用桃枝敲敲打打，试图借此</p>
<p>里念念有词，是这座小镇祖祖辈辈传下来的老话</p>
<p>二月二，烛照梁，桃打墙，人间蛇虫无处藏。</p>
</div>
</body>
父元素高度塌陷问题
解决方法
1.在父容器最下边添加一个块元素，块元素没有高度，清除浮动影响（clear:;）缺点：没有用的元素
clear要写在需要解决影响问题的元素上
<div id="app4" class="item4"></div>
#app4{ clear: left;}
2.在父元素的尾部添加伪元素::after
#app::after{
content: "";
display: table;
clear: both;
}
既想解决高度塌陷问题，又要解决外边距重叠问题
解决方法
#app::after,#div1::before{
content: "";
display: table;
clear: both;
}
开发规范：
1.给需要解决塌陷和重叠的容器添加clearfix的class
2.给clearfix解决塌陷和重量问题
.clearfix::after,.clearfix::before{
content: "";
display: table;
clear: both;
}
修改元素的排序方式 bisplay
display: inline; 此元素会被显示为内联元素，元素前后没有换行符
display: block; 此元素会将显示为块级元素，此元素前后会带有换行符,可设宽高
display: table; 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
display: inline-block; 行内块元素,可设置宽高，不会独占一行
display: noen; 隐藏元素，在页面上不占空间
display: list-item; 此元素会作为列表显示
设置元素的可见性：
方法一：display:noen;
方法二：visibility
visible：默认值可见的
hidden 隐藏元素，空间忍然占空间
方法三：高度设置为零，内容还在，可以设置溢出隐藏
方法四：设置元素为opacity：0-1 空间被占
BSC（块级格式化环境）：通过设置一些样式解决问题
BFC解决问题：
1、浮动影响问题
2、高度塌陷问题
3、边距重叠问题
解决方法：
1、通过伪元素解决
2、给父元素设置浮动 缺点：影响父元素外的其它元素
3、给父元素设置为行内块 缺点：影响布局宽度丢失
4、给父元素的overflow设置非visble 缺点：占用overflow属性
水平排列元素结构
案例
<body>
<div id="root">
<div class="container">
<div class="banner">
<div id="dox1" class="dox">HELLO WORLD!!1</div>
<div id="dox2" class="dox">HELLO WORLD!!2</div>
<div id="dox3" class="dox">HELLO WORLD!!3</div>
<div id="dox4" class="dox">HELLO WORLD!!4</div>
</div>
</div>
</div>
</body>
方法一：
1、把需要并排排列的块元素浮动起来
2、用伪元素解决父元素的高度塌陷问题
3、用margin: 0 auto;居中
#root>.container::after{
content: "";
display: table;
clear: left;
}
以margin: 0 auto;居中
#root>.container{
width: 930px;
height: 400px;
margin: 0 auto;
}
方法二：
1、把需要并排排列的块元素浮动起来
2、用把父元素变成行内块的方式解决父元素的塌陷问题
3、用字体居中text-align:center;居中
#root>.container>.banner{
display: inline-block;
}
#root>.container{
text-align: center;
}
