一、浮动

浮动属性是专门用于进行网页并排布局的

作用：脱离标准文档流，不再受元素等级的限制，又可以并排显示，又可以设置宽和高

float：属性就是设置元素浮动

属性值：left、right

float: left;

在这里插入图片描述

float: right;

在这里插入图片描述

浮动的特性：元素会按照书写的顺序进行依次贴边，同一个父盒子中，即可以设置左浮动，也可以设置右浮动

<div>
    <p class="left">1</p>
    <p class="right">2</p>
    <p class="left">3</p>
    <p class="right">4</p>
    <p class="left">5</p>
    <p class="right">6</p>
    <p class="left">7</p>
    <p class="right">8</p>
    <p class="left">9</p>
    <p class="right">10</p>
</div>

补充知识点：所有的兄弟元素，如果一个有浮动了，剩下的所有兄弟元素必须都设置浮动

如果浮动元素不设置宽度，不会撑满父盒子，而被内容撑宽

二、浮动小练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
      
      
            margin: 0;
            padding: 0;
        }
        .inner{
      
      
            width: 970px;
            margin: 0 auto;
        }
        .inner .top{
      
      
            height: 103px;
            margin-bottom: 10px;
        }
        .inner .top .logo {
      
      
            width: 277px;
            height: 103px;
            float: left;
            background-color: red;
        }
        .inner .top .nav{
      
      
            width: 679px;
            height: 103px;
            float: right;
        }
        .inner .top .nav .news {
      
      
            width: 137px;
            height: 49px;
            background: greenyellow;
            margin-bottom: 8px;
            float:right;
        }
        .inner .top .nav .nav_li{
      
      
            height: 46px;
            background: #000;
            background: greenyellow;
            float: right;
            width: 100%;
        }
        .inner .middle{
      
      
            height: 435px;
            margin-bottom: 10px;
        }
        .inner .middle .left {
      
      
            width: 310px;
            height: 435px;
            background-color: orange;
            float: left;
        }
        .inner .middle .right{
      
      
            width: 650px;
            height: 435px;
            float: right;
        }
        .inner .middle .right .r_top{
      
      
            height: 401px;
            margin-bottom: 10px;
        }
        .inner .middle .right .r_top .r_top_left{
      
      
            width: 450px;
            height: 401px;
            float: left;
        }
        .inner .middle .right .r_top .r_top_left .s_top{
      
      
            height: 240px;
            background: blue;
            margin-bottom: 10px;
        }
        .inner .middle .right .r_top .r_top_left .s_center{
      
      
            height: 110px;
            background: blue;
            margin-bottom: 10px;
        }
        .inner .middle .right .r_top .r_top_left .s_bottom{
      
      
            height:30px;
            background: blue;
        }
        .inner .middle .right .r_top .r_top_right{
      
      
            width: 190px;
            height:401px;
            background: purple;
            float: right;
        }
        .inner .middle .right .r_bottom{
      
      
            height: 25px;
            background: green;
        }
        .inner .bottom {
      
      
            height: 35px;
            background: navy;
        }
    </style>
</head>
<body>
    <div class="inner">
        <!-- 顶部导航 -->
        <div class="top">
            <div class="logo"></div>
            <div class="nav">
                <div class="news"></div>
                <div class="nav_li"></div>
            </div>
        </div>
        <!-- 中心部分 -->
        <div class="middle">
            <div class="left"></div>
            <div class="right">
                <div class="r_top">
                    <div class="r_top_left">
                        <div class="s_top"></div>
                        <div class="s_center"></div>
                        <div class="s_bottom"></div>
                    </div>
                    <div class="r_top_right"></div>
                </div>
                <div class="r_bottom"></div>
            </div>
        </div>
        <!-- 底部footer -->
        <div class="bottom">

        </div>
    </div>
</body>
</html>

三、浮动的性质

1、浮动的元素脱标

标准流元素是区分行、块

我们知道了浮动元素是脱离标准流的，那么脱离标准流后，浮动元素有哪些特性？

答：浮动元素，脱离标准流后，既可以设置宽度和高度，也可以实现并排显示，不区分元素状态，也就是不区分行内元素和块级元素

div p {
    width: 100px;
    height: 100px;
    background: purple;
}
div span {
    width: 100px;
    height: 100px;
    background: orange
}

p标签和span标签都设置了宽度和高度，但是由于元素类型的限制，span标签没有宽度和高度

在这里插入图片描述

div内部元素浮动之后

div p {
    width: 100px;
    height: 100px;
    background: purple;
    float: left;
}
div span {
    width: 100px;
    height: 100px;
    background: orange;
    float: left;
}

在这里插入图片描述

需要注意的是，兄弟元素如果有一个浮动了，剩下必须都要浮动

如果此时p标签和span标签都没有设置宽度和高度，元素的宽度会被内容撑宽，不会自动撑满父盒子

div p {
    background: purple;
    float: left;
}
div span {
    background: orange;
    float: left;
}

在这里插入图片描述

2、依次贴边

如果父盒子的宽度不足以存下所有的子盒子，存放不下的会自动向前寻找，知道空余位置能够存放，从而进行贴边显示

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
      
      
            margin: 0;
            padding: 0;
        }
        div {
      
      
            width: 400px;
            height: 400px;
            border: 5px solid red;
            margin: 100px auto
        }
        div p{
      
      
            width: 100px;
            height: 100px;
            float: left;
        }
        div p.par1{
      
      
            height: 250px;
            background: green;
        }
        div p.par2{
      
      
            height: 200px;
            background: blue;
        }
        div p.par3{
      
      
            background: yellow;
        }
        div p.par4{
      
      
            width: 300px;
            background: cyan;
        }
    </style>
</head>
<body>
    <div>
        <p class="par1">1</p>
        <p class="par2">2</p>
        <p class="par3">3</p>
        <p class="par4">4</p>
    </div>
</body>

在这里插入图片描述

如果父盒子的跨度不够，子盒子会依次贴边，但是如果前面元素中有空隙当前需要贴边的元素不会钻空，不会出现钻空的现象，而之会查询剩余宽度实现依次贴边

div {
    width: 600px;
    height: 400px;
    border: 5px solid red;
    margin: 100px auto
}
div p{
    width: 100px;
    height: 100px;
    float: left;
}
div p.par1{
    height: 250px;
    background: green;
}
div p.par2{
    width: 330px;
    background: blue;
}
div p.par3{
    height: 200px;
    background: yellow;
}
div p.par4{
    width: 400px;
    background: cyan;
}

在这里插入图片描述

如果某一个子盒子的宽度大于了父盒子，会有溢出状态

div {
    width: 600px;
    height: 400px;
    border: 5px solid red;
    margin: 100px auto
}
div p{
    width: 100px;
    height: 100px;
    float: left;
}
div p.par1{
    height: 250px;
    background: green;
}
div p.par2{
    width: 330px;
    background: blue;
}
div p.par3{
    height: 200px;
    background: yellow;
}
div p.par4{
    width: 650px;
    background: cyan;

在这里插入图片描述

向右贴边的原理和向左相同，也是按照先后顺序进行贴边

在这里插入图片描述

3、浮动依次贴边练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
      
      
            margin: 0;
            padding: 0;
        }
        .outer {
      
      
            height: 440px;
            width: 940px;
            padding: 10px;
            border: 2px solid #000;
            margin: 10px auto
        }
        .outer div {
      
      
            float: left;
        }
        .outer .box1{
      
      
            width: 300px;
            height: 260px;
            background: pink;
        }
        .outer .box2 {
      
      
            width: 240px;
            height: 260px;
            background:cyan;
        }
        .outer .s_box{
      
      
            width: 200px;
            height: 130px;
        }
        .outer .box3 {
      
      
            background: yellowgreen;
        }
        .outer .box4 {
      
      
            background: greenyellow;
        }
        .outer .box7{
      
      
            width: 300px;
            height: 180px;
            background: blueviolet;
        }
        .outer .s_box2 {
      
      
            width: 160px;
            height: 180px;
        }
        .outer .box5 {
      
      
            background: purple;
        }
        .outer .box6 {
      
      
            background: palegreen;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="s_box box3"></div>
        <div class="s_box box4"></div>
        <div class="s_box box4"></div>
        <div class="s_box box3"></div>
        <div class="box7"></div>
        <div class="s_box2 box5"></div>
        <div class="s_box2 box6"></div>
        <div class="s_box2 box5"></div>
        <div class="s_box2 box6"></div>
    </div>
</body>
</html>

4、浮动margin塌陷问题

标准流有margin塌陷的现象

在垂直方向上，如果有相遇的margin，两个盒子之间不是属性值的和，而是比较两个盒子谁的margin更大，使用的就是margin值更大的高度

同级盒子margin塌陷

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
      
      
            margin: 0;
            padding: 0;
        }
        div{
      
      
            width: 200px;
            height: 200px;
            margin: 50px;
            background: blue
        }
        .bottom{
      
      
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="bottom"></div>
</body>

在这里插入图片描述

父子盒子，如果子盒子设置margin-top，父盒子没有设置或者margin-top的值小于了子盒子，此时会存在margin塌陷的现象

如何解决margin塌陷的现象，如果是兄弟关系，统一都设置一个方向的margin，比如都设置margin-bottom

如果是父子盒子，可以给父盒子加border或者padding，其实这两种方法都不合理，正常情况下都不会使用子盒子去向上踹父盒子，而是使用父盒子加padding

在这里插入图片描述

总结：浮动元素没有了标准流的margin塌陷现象，各自有各自的margin，不会相互塌陷；

5、浮动元素让出标准流

标准流中的元素都有自己的一个标准流位置，后面的元素只能在前面元素的后面进行加载。

浮动元素脱离了标准流，它会让后面的元素占有自己原来的位置，显示效果上来看仿佛是自己“飘”起来了，我们称之为脱标了

标准流显示

在这里插入图片描述

此时粉色盒子浮动了

在这里插入图片描述

6、字围现象

字围现象：同级元素中，前面元素如果浮动了，后面的标准流会占有前面元素的文字，后面盒子中如果有文字，不会和盒子一样占有前面盒子的位置，而是绕开浮动元素的位置，围绕着加载，实现字围现象。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
      
      
            margin: 0;
            padding: 0;
        }
        .outer{
      
      
            width: 300px;
            height: 300px;
            margin: 100px auto;
        }
        .par{
      
      
            width: 100px;
            height: 100px;
            background: pink;
            float: left;
        }
        .box{
      
      
            width: 200px;
            height: 200px;
            background: cyan;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p class="par"></p>
        <div class="box">
            111文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        </div>
    </div>
</body>

在这里插入图片描述

我们可以利用字围实现网页中明显简介的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
      
      
            margin: 0;
            padding: 0;
        }
        div{
      
      
            width: 300px;
            padding: 10px;
            border: 1px solid red;
            margin: 30px auto;
        }
        div img{
      
      
            width: 100px;
            float: right;
            margin: 8px;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/sxb.jpg" alt="">
        <p>
            宋小宝，本名宋宝利，1981年1月5日出生，吉林省通化市辉南县楼街乡光明村人 [1]  ，中国内地男演员，喜剧表演艺术家赵本山先生的第32位徒弟。
        </p>
        <p>
            2009年，因参加综艺节目《本山快乐营》小有名气。2011年，因参演辽宁卫视春节晚会与师父赵本山合作小品《相亲》而获得更多关注。2012年8月，凭借电视剧《樱桃》参加第四届新农村电视艺术节获最佳男主角 [2]  。同年12月10日，凭借电视剧《樱桃》参加第八届华鼎奖获当代类最佳男演员。2013年10月，第十届华鼎奖获最受中国媒体欢迎的演员。2014年8月，凭借电视剧《樱桃红》参加第十三届华鼎奖获中国当代题材电视剧最佳男演员奖 [3]  。2015年参加中国首档明星喜剧竞赛真人秀《欢乐喜剧人第一季》 [4]  。同年11月5日，参加《咱们穿越吧》庆功会。同年12月9日，献唱电影《唐人街探案》推广曲《往事只能回味》。2016年12月13日，献唱电影《东北往事之破马张飞》主题曲《全世界都在说东北话》。
        </p>
    </div>
</body>
</html>

在这里插入图片描述

四、清除浮动

浮动带来的影响

标准流的盒子，如果不设置高度，会被内容自动撑高。

如果盒子内部的元素浮动了，子盒子脱标后，不能撑高父盒子

父盒子的高度就会为0，会导致一些问题

父盒子的高度不能被子元素撑高了

在这里插入图片描述

如果父盒子后面还有其他兄弟标签，并且该兄弟标签内部也有浮动元素，前面的浮动会影响后面的贴边

在这里插入图片描述

根据以上两个问题，需要整理方案解决以上问题

1、清除浮动方法一：height属性

在这里插入图片描述

缺点：父盒子的高度不可以随着子元素变高而增高，如果子盒子是动态的，父盒子还会出现原来的问题

在这里插入图片描述
使用height属性清除浮动影响只适用于父子都是固定高度的

2、清除浮动方法二：clear属性

css有个clear属性，专门清除浮动元素带来的影响

属性值：

left：清除前面左浮动的影响

right：清除前面右浮动的影响

both：清除前面所有浮动的影响

clear: both;

在这里插入图片描述

clear属性可以解决当前盒子的浮动影响

缺点：父盒子还是不能被内部元素撑高，父盒子之间的margin显示有问题

3、清除浮动方法三：隔墙法

方法：利用clear属性和height属性，制作一堵墙，将两个有浮动的元素父亲隔离起来

.cl {
            clear: both;
            height: 10px;
      }

<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="cl"></div>
    <div class="box1 ">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

缺点：子盒子还是不能撑满父盒子的高度

4、清除浮动方法四：内墙法

方法：通过隔墙法演变而来，将墙放在了两个受影响父元素内部，所有的子元素最后，设置一堵内墙法，设置clear属性

.cl {
            clear: both;
      }

<div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl"></div>
</div>

<div class="box1 ">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl"></div>
</div>

在这里插入图片描述

解决了之前遇到浮动影响所有的问题

5、清除浮动方法五：伪类（给所有受浮动影响的元素加伪类属性）

CSS选择器的一种（后面我们CSS3课程中会学习）

.clearfix::after {
    content: '';
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}

在这里插入图片描述

6、清除浮动方法六：overflow属性（给父级元素设置）

overflow属性清除浮动影响是一个小偏方，值必须是hidden，可以解决浮动的所有问题

overflow: hidden;

在这里插入图片描述

通过overflow属性解决浮动影响的原因：overflow属性有BFC特性，BFC特性有一个特点，设置是该属性的元素就拥有被内部元素撑高的特点

实际工作中，使用内墙法或者overflow属性去解决浮动的影响

五、浮动案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
      
      
            margin: 0;
            padding: 0;
        }
        .outer {
      
      
            width: 1000px;
            height: 96px;
            background: #F4F3F2;
            margin: 100px auto;
            padding: 15px 0;
        }
        .outer .pic {
      
      
            width: 290px;
            height: 96px;
            float: left;
            padding-left: 20px;
            border-right: 1px solid #D0CDC7;
        }
        .outer .pic .top{
      
      
            height: 65px;
        }
        .outer .pic .top img {
      
      
            width: 83px;
            float: left;
        }
        .outer .pic .top .t_cont{
      
      
            float: left;
            width: 197px;
            padding-left: 10px;
            font-size: 14px;
            color: #0B335F;
        }
        .outer .pic .top .t_cont .tit {
      
      
            line-height: 24px;
        }
        .outer .pic .top .t_cont .des{
      
      
            font-size: 12px;
            color: #666560;
            line-height: 22px;
        }
        .outer .pic .top .t_cont .tit span{
      
      
            color: #DA0000;
        }
        .outer .pic .bottom {
      
      
            font-size: 14px;
            color:#164560;
            line-height: 30px;
        }
        .outer .news {
      
      
            float: left;
            padding-left: 32px;
            line-height: 24px;
            font-size: 14px;
            color:#164560;
        }
        .outer .news ul {
      
      
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="pic">
            <div class="top">
                <img src="images/cctvpic1.jpg" alt="">
                <div class="t_cont">
                    <p class="tit">
                        <span>快看|</span>2019我们一起想她表白
                    </p>
                    <p class="des">
                        新中国70华诞，为祖国母亲而歌。
                    </p>
                </div>
            </div>
            <div class="bottom">
                解放军最新地空导弹车曝光！战力惊人
            </div>
        </div>
        <div class="pic">
            <div class="top">
                <img src="images/cctvpic2.jpg" alt="">
                <div class="t_cont">
                    <p class="tit">
                        <span>中国梦实践者|</span>大国工匠 行业先锋 创业圆梦
                    </p>
                </div>
            </div>
            <div class="bottom">
                “家国情怀”是新时代一支强心剂
            </div>
        </div>
        <div class="news">
            <ul>
                <li>第七届中国网络视听大会</li>
                <li>聚焦2019数博会</li>
                <li>壮丽70年</li>
                <li>2019中国北京世界园艺博览会</li>
            </ul>
        </div>
    </div>
</body>
</html>

【Web】CSS学习笔记之浮动*

目录

一、浮动

二、浮动小练习

三、浮动的性质

1、浮动的元素脱标

2、依次贴边

3、浮动依次贴边练习

4、浮动margin塌陷问题

5、浮动元素让出标准流

6、字围现象

四、清除浮动

浮动带来的影响

1、清除浮动方法一：height属性

2、清除浮动方法二：clear属性

3、清除浮动方法三：隔墙法

4、清除浮动方法四：内墙法

5、清除浮动方法五：伪类（给所有受浮动影响的元素加伪类属性）

6、清除浮动方法六：overflow属性（给父级元素设置）

五、浮动案例

猜你喜欢