CSS浮动和清除浮动

1.浮动float

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

CSS浮动和清除浮动_第1张图片

 

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 class="c1">div>
<div class="c2">div>

body>
html>

 

CSS浮动和清除浮动_第2张图片

 

2.清除浮动clear属性

CSS浮动和清除浮动_第3张图片

CSS浮动和清除浮动_第4张图片

 (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">c1div>
    <div class="c2">c2div>
div>

body>
html>

 

 CSS浮动和清除浮动_第5张图片

3.overflow溢出属性

 

CSS浮动和清除浮动_第6张图片

 CSS浮动和清除浮动_第7张图片

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


<div class="header-img">
    <img src="huluwa.png" alt="">
div>
body>
html>

CSS浮动和清除浮动_第8张图片

 

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> 
    <div class="c1">div>
    <div class="c1">div>
    <div class="c1">div>
    <div class="c2">div>
div>

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

body>
html>

 

CSS浮动和清除浮动_第9张图片

 

转载于:https://www.cnblogs.com/whylinux/p/10229759.html

你可能感兴趣的:(CSS浮动和清除浮动)