学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>基础教程>>

CSS基础教程(十八) Float(浮动)

发布时间:2020-01-14点击:

    什么是CSS Float(浮动)呢?

    CSS中的Float浮动是一个定位属性,它可以使元素向左或者向右移动,并且移动的同时,其周围的元素也会重新排列,让出该元素需要占据的位置,现实中,我们常用来布局图像使用。

    一、Float浮动的使用

    使用浮动时的属性就是float,如果想要想要向右浮动,那就是设置元素属性为float:right.

    源代码:

    <style>
                span{
                    border: 1px solid black;
                    width:200px;
                }
                .fd{
                    float: right;
                }
            </style>
        <span class="fd">我是第一个span</span>
        <span>我是第二个span</span>
    虽然代码中第一个sapn在左边,但是因为使用了浮动就移动到了最右边,而第二个span因为第一个移动走了,就向左移动了,这就是浮动与重新排列。

    二、多个浮动元素的排列

    如果页面中同一行有多个浮动元素,那么它们会根据先后顺序进行排列,第一个浮动的元素会占据最边界的位置,而后第二个浮动元素只会以第一个边界浮动,如果同一行没有位置,那么会自动换行。就像如下:

    三、清除浮动clear

    如果想要清除浮动,请使用clear:both;元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

    div
    {
        clear:both;
    }

    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

题库内容推荐