CSS浮动和清除浮动

1.浮动float

　　div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只有一个标签设置了浮动float属性，就会变成块级标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>10float页面布局示例</title>

    <style> * { margin: 0px; padding: 0px;
        } .c1 { height: 1000px; width: 20%; background-color: darkslategrey; float: left;    /* 使用浮动属性，将div1和div2两个块级标签横向推挤在一起。如果两个标签能够摆在一排，就会浮动到一起 */
        } .c2 { height: 1000px; width: 80%; background-color: black; float: left;
        }

    </style>
</head>
<body>

<!-- 设置一个div占用屏幕左侧的百分20，一个div占屏幕右侧的百分之80 -->
<div class="c1"></div>
<div class="c2"></div>

</body>
</html>

2.清除浮动clear属性

（1）利用伪元素具有clear清除浮动的属性来解决父标签塌陷的问题（父标签撑不起来的问题）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>11清除浮动示例</title>

    <style>
        /* 通用样式将整个浏览器的外边距与内边距设置为0 */ * { margin: 0; padding: 0;
        } #d1 { border: 1px solid black;
        } .c1,
        .c2 { float: left;    /* 左浮动 */ height: 100px;
        }

        /*.c3 {*/
            /*!*height: 100px;*!*/
            /*clear: left;*/
        /*}*/

        /* 在d1这个标签的最后加一个伪元素,伪元素的内容为空，但具有清除浮动的属性，解决了父标签塌陷问题*/ #d1:after { content: ""; clear: left; display: block;
        }
    </style>

</head>
<body>

<div id="d1">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
</div>

</body>
</html>

3.overflow溢出属性

（1）利用overflow溢出属性做圆形头像的例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>12overflow示例</title>
    <style> .c1 { width: 120px; height: 120px; border: 1px solid black;
            /*overflow: scroll;   !* 当内容溢出时，则会使用滚动条，防止内容溢出 *!*/ overflow: auto;     /* 同样是增加了滚动条来防止溢出*/
        }
        /* 使头像变成圆形的例子 */ .header-img { width: 120px; height: 120px; border: 2px solid #FF0000; border-radius: 100%;    /* 圆形边框 */ overflow: hidden;   /* 如果内容溢出了则隐藏掉溢出的部分 */
        } img { max-width: 100%;    /* 设置图片的最大宽度为100%，也就是和父标签一样大 */
        }
    </style>

</head>
<body>
<!-- 由于文本内容过多，文本内容超过了父标签的长和高，则发生内容了溢出 -->
<div class="c1">嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</div>

<!-- 利用overflow溢出的属性来完成圆形的头像，设置好了父标签的大小，在父标签里用一个字标签设置图片，子标签的图片比父标签大的话，则利用子标签的max-width: 100%来解决，圆形利用父标签的溢出属性解决 -->
<div class="header-img">
    <img src="huluwa.png" alt="">
</div>
</body>
</html></pre>

4.清除浮动示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>float下午版</title>
    <style> #d1 { border: 1px solid black;
        } .c1 { height: 50px; width: 50px; background-color: blue; border: 1px solid red; float: left; /* 增加左浮动属性 */
        }

        /* 清除浮动的副作用，高度不会跑了 */
        /*.c2 {*/
            /*background-color: darkslategrey;*/
            /*clear: left;  !* 清除左浮动，有了这句话就可以让d1标签撑起来了，左边不能有浮动的元素 *!*/
        /*}*/

        /* 另外一种清除浮动副作用的方法 */
        /*#d1:after {*/
            /*content: '';*/
            /*clear: both;*/
            /*display: block;*/
        /*}*/

        /* 使用类样式进行清除浮动,之后只要需要清除浮动，标签都可以使用这个样式 */ .clearfix:after { content: ''; clear: both; display: block;
        }

    </style>
</head>
<body>

<div id="d1" class="clearfix">
    <div class="c1"></div> <!-- c1的浮动属性会导致d1这个父标签的高度撑不起来 -->
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c2"></div>
</div>

<div class="c3">我是解药</div>

</body>
</html></pre>

来源：oschina

链接：https://my.oschina.net/u/4861025/blog/4885364

标签

strip

CSS的浮动属性

CSS浮动和清除浮动