浮动以及清除浮动问题标准文档流

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;

浮动以及清除浮动问题 标准文档流

浮动以及清除浮动问题标准文档流