1.浮动:浮动能使盒子脱离标准文档流;
四大特性 : 1,浮动的元素脱标;
2.浮动的元素互相贴靠;
3.浮动的元素有"字围"效果(是文本围绕着浮动盒子显示)
4.收缩的效果:将块级元素转化成行内;
大家一定要谨记:关于浮动,我们初期一定要遵循一个原则,永远不是一个盒子单独浮动,要浮动就要一起浮动,另外有浮动一定要清除浮动;
清除浮动的方式:
1.给父盒子设置高度;
2.clear : both;
3.伪元素清除法;
4.overflow : hidden;
清除浮动的案例:(.clear : both;方法)
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index1.css">
</head>
<body>
<div>
<ul>
<li>Python</li>
<li>web</li>
<li>linux</li>
<!--给浮动元素最后面加一个空的div并且该元素不浮动,然后设置clear:both 清除别人对我的浮动影响-->
<!-- <div class="clearfix"></div> -->
<!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响-->
<!-- 内墙法 -->
<!-- 无缘无故加了div元素 结构冗余 -->
<div class="clear" style="clear:both;"></div>
</ul>
</div>
<div class="box">
</div>
<!--<div class="content"></div>-->
</body>
</html>
案例2:(伪元素清除法;)
.boss1:after{
content:".";
在这里引用了 clear : both
clear:both;
background-color:green;
display:block;
visibility:hidden;
height:0;
1000%;
height:1000px;
border:5px solid black;
案例3 : (overflow : hidden;)
这种方法,使用简单.
.boss1{
overflow:hidden;
}
2.标准文档流:
哪些标签不在标准文档流 : 浮动 , 绝对定位 , 固定定位; 如果不是标准文档流的标签(浮动的标签或者脱标),那它有四个特性 :
1.浮动的元素脱标;
2.浮动的元素互相贴靠;
3.浮动的元素有"字围"效果;
4.收缩的效果 : 将块级元素转化成行内;
5.不占位置;
清除浮动的标签 : 好处: 1.浮动的元素能实现并排;
2.把空白折叠现象清除;
3.能撑起父盒子的高度;
注意 : 浮动的盒子垂直方向上不会出现坍塌问题 .
只要盒子浮动了就不区分块级标签还是行内标签.
1.可以任意的设置宽高;
2.坍塌问题不会出现;
使用margin : 0 auto 注意点 :
1.使用margin : 0 auto ;水平居中,盒子必须有width,要有明确width. 文字水平居中使用text-align : center;
2.只有标准流下的盒子,才能使用margin : 0 auto ; 当一个盒子浮动了,固定定位,绝对定位,margin : 0 auto ,不能用了;
3.margin : 0 auto ; 居中盒子,而不是居中文本,文字水平居中使用text-align : center;