在开发中，水平方向用浮动流布局，垂直方向用标准流布局
浮动元素不会覆盖住没有浮动元素的格式
浮动元素的宽度问题：
- 在标准流中，内容的高度可以撑起父容器的高度。
- 一个浮动元素，浮动的元素撑起父元素的高度。
Paste_Image.png
清除浮动方式：保证后面一个盒子里面的浮动元素不会去找前面盒子的浮动元素。
1、给前一个父容器设置高度，在开发中尽量不写高度。
2、给第二个元素容器设置一个 clear 属性
{clear: none(默认) / left(不找前面的左浮动元素) / both(不找前面的左和右浮动元素) / right(不找前面的右浮动元素)
{clear:both;}
注意：当给某个属性添加 clear 属性之后，此元素的 margin 属性应付失效。本质原因是它的父元素没有设置边框。
3、隔墙法：额外添加一个块级元素，由于是通过HTML代码来修改CSS，所以不推荐使用。
- 外墙法：在box1和box2之间添加一个块级元素(一道外墙)，给块级元素设置一个{clear:both;}
.wall {clear:both;} // 设置不找左右元素浮动
<div class="wall"></div> // 设置一道外墙
注意：外墙法可以让box2设置margin-top，不能设置box1的margin-bottom，可以设置外墙的高度来设置间隙。
-内墙法：在box1中的最后一个子元素后面添加一个块级元素(一道内墙)，给块级元素设置一个{clear:both;}
.wall {clear:both;} // 设置不找左右元素浮动
<div class="wall"></div> // 设置一道内墙
注意：内墙法可以让box2设置margin-top，可以设置box1的margin-bottom，可以设置外墙的高度来设置间隙。
- 外墙和内墙的区别：内墙可以撑起第一个盒子的高度，外墙不能撑起一个盒子的高度，在开发中不常用隔墙法来清除浮动。
伪元素选择器：利用CSS代码，给指定标签的内容前面添加子元素、给指定标签 内容后面添加子元素。
格式：
标签 #id .类名::before/after {content:"要添加的内容";}
Paste_Image.png
-伪元素选择器清除浮动：
格式：
.topbox1::after {
content: ""; /* 设置元素内容为空 /
display: block; / 设置元素为块级元素 /
height: 0px;
visibility: hidden; / 设置元素不显示空 /
clear: both; / 设置元素左右不浮动 */
}
注意：伪元素选择器清除浮动在 IE6 浏览器是没有效果的，兼容问题，由于伪元素是CSS3新增的，IE6不支持。
解决办法，在伪元素清除浮动的下行添加下面的代码：
.topbox1 {星号zoom:1;} /* 这段代码是用来兼容IE6的 */
overflow:hidden
1、可以将超出标签范围的内容裁剪掉。
2、可以清除浮动：box1box2
.box1 {overflow:hidden; 星号zoom:1;} 类似内墙法，推荐使用
注意：它也有兼容问题，在IE6中无效，要添加 *zoom:1;
B盒子在A盒子中，如果想给B盒子设置margin-top属性，又不想给A添加边框时，可以在A样式里面写上 overflow:hidden ，这样就能在B盒子里面设置margin-top属性了。
网友评论