CSS float and clear float

1. Float

Div cooperates with float to make the layout of the page. The most common place for float is to make the layout. Only one label has the float attribute set, and it becomes a block-level label.

<!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 the float clear attribute

(1) Use the pseudo-element to have the attribute of clear to clear the float to solve the problem of the collapse of the parent label (the problem that the parent label cannot support)

<!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 overflow attribute

(1) An example of using overflow attribute to make a round avatar

<!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. Clear floating example

<!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>

CSS floating properties

CSS float and clear float

Guess you like