css：float

takashi_void

已于 2022-12-03 20:42:24 修改

阅读量270

点赞数

文章标签： css3 html5

于 2022-04-03 21:44:57 首次发布

本文链接：https://blog.csdn.net/HZBCc/article/details/123945300

版权

本文介绍了CSS中的浮动属性，包括left和right浮动效果，以及浮动元素如何脱离文档流并影响周围元素布局。主要内容包括浮动元素的特点，如脱离文档流、文字环绕等，还展示了浮动在创建水平布局中的应用。此外，文章末尾包含一段与浮动无关的文字，提及了英语学习的问题。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <title>float</title>
        <meta charset="utf-8">

        <style>
            /* 
            浮动可以使一个元素向其父元素的左侧或者右侧移动
            可以使用float来设置一个元素的浮动
                可选值：
                    none：默认值，元素不移动
                    left：元素向左移动
                    right：元素向右移动

            注意：元素设置浮动以后，水平布局的等式便不需要成立
                 元素设置浮动以后，便会脱离文档流，不再占用文档流的位置，所以元素下面的文档流会自动向上移动

            浮动的特点：
                1:浮动元素会完全脱离文档流，不再占据文档流中的位置
                2:设置浮动以后元素会向父元素左侧或者右侧移动
                3:浮动元素默认不会从父元素中移出
                4:浮动元素向左或者向右移动时，不会超过他前面的其他浮动元素
                5:如果浮动元素的上面是一个没有浮动的块元素，则浮动元素无法上移
                6:浮动元素不会超过它上边浮动的兄弟元素，最多就和他一样高
                7:浮动元素不会盖住文字，他会环绕文字，所以可以用浮动来设置文字环绕图片的效果

                脱离文档流的特点：
                    块元素不再独占一行
                    块元素的宽度和高度默认都被内容撑开
                    行内元素变成块元素，特点和块元素一样

                脱离文档流不需要区分块元素和行内元素来


                浮动目前来讲他的主要作用是让页面中的元素可以水平排列
                通过浮动可以制作一些水平方向的布局



            */

            .box{
                width: 100px;
                height: 100px;
                background-color: cadetblue;
            }
            
            .box1{
                width: 100px;
                height: 100px;
                background-color: aqua;
                float: left;
            }

            .box2{
                width: 100px;
                height: 100px;
                background-color: rgb(233, 74, 0);
                float: right;
            }

            .box3{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 170);
                /* float: left; */
            }

            .box4{
                width: 100px;
                height: 100px;
                background-color: rgb(121, 255, 121);
                float: left;
            }
            
            .span{
                width: 100px;
                height: 100px;
                background-color: rgba(8, 4, 4, 0.089);
                float: left;
            }



        </style>
    </head>
    <body>
        <div class="box"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <span>小学农村上的 ，英语就没有学，初中同班同学英语成绩都很好，自己学了一段时间感觉还是没有别人好，就放弃了对英语的学习。高中的时候英语连蒙带猜考五六十分。现在在一个传媒类二本读大一，想考英语四级，并且想读研，如何提高自己的英语成绩？主要是有没有高效的背单词的方法</span>
        <span class="span">span</span>
    </body>
</html>