CSS:浮动和定位

更多
2020年02月28日 20点11分 作者:叶飞 修改
使用浮动和定位,可以将元素放置到我们期望的位置,是目前页面布局中最为广泛使用的手段!


浮动(float) 

浮动最早被应用于文字环绕。比如我们有一张图片和一段文字:

<div style="border:1px dashed;padding:10px;">
    <img src="~/images/logo.png" style="float:left;" />
    <p style="line-height: 25px;">
        昨天接了一个招聘“营销合伙人”的求职电话,给我说:现在我们这样的培训机构,“至少要花60%的精力做营销。
        只要把生招到了,其他的问题都好解决……
        招个老师什么的,容易得很!”
    </p>
</div>

只需要将 img 设置为左浮动(float:left),就会出现如下效果:

这是一个很好的理解“浮动”的例子,浮动会对以下两者都造成影响:

  • 浮动元素本身:
    1. 首先浮动,直到父元素的顶部
    2. 向左运动(由float的属性left决定),直到父元素的最左边。(如果float属性为right,浮动元素就向右运动,直到父元素的最右边
  • 对其他元素的影响(我们通常说:因为浮动元素脱离原有的文档流,所以……
    1. 拦不住”下面的元素了,下面的元素会向上移动
    2. 但是,浮动的img元素不会和p元素在平面上“重叠”,它仍然占据着一个位置

此外,浮动还会:

  • 将流元素自动变成块元素
  • 消除margin折叠效果


实际上,浮动被广泛应用的还是布局(从而完全取代了表格布局),所以我们用这种常见布局结构来予以演示:

<body>
    <header>
        header:源栈欢迎你
    </header>
    <article>
        article:<br />我们的飞哥棒棒哒!
    </article>
    <aside>
        aside:<br />大神小班
    </aside>
    <footer></footer>
</body>

CSS初始样式如下:

    header{
        background-color: aquamarine;
        height:30px;
    }

    article {
        background-color: blue;
        width: 200px;
        height: 300px;
        /*float:left;*/
    }

    aside {
        background-color: greenyellow;
        width: 100px;
        height: 500px;
        /*float:right;*/
    }


浮动到哪里为止

简单的说,浮动被“卡”住了就会停止,能卡住元素浮动的包括:

  • 父元素边框:元素的浮动无法超出父元素界定的范围。

    删除header元素,article左浮动,aside右浮动:
        article {
            float:left;
        }
    
        aside {
            float:right;
        }



  • 上面未浮动的元素:
    1. 如果上面是一个元素,块元素默认就占着一行,浮动元素当然就无法继续向上浮动
      保留header元素

      @想一想@:如果header定义了宽度呢?
    2. 如果上面是一个元素,流元素默认是流动的,无法阻拦浮动元素。如果挡住了浮动元素,还会被挤走。
          header{
              display:inline;
          }
      删除article,aside右浮动 删除aside,article左浮动



  • 上面已浮动的元素:
    1. 在左右方向阻拦下面的浮动元素
      article和aside都向左浮动 article和aside都向右浮动
      注意先后顺序:
      首先是article的右浮动,所以article在aside的右边



    2. 如果已浮动元素的宽度+下面浮动元素的宽度 > 父元素内空宽度,上面的元素就无法向上浮动。换言之,一排装不下,后面的元素自动换行
      :元素的大小是包含了padding、border和margin的。


父元素“坍塌”

上述图片,严格来讲,其实是不准确的,我们给article和aside外面添加一个main标签:

    <main>
        <article>
            article:<br />我们的飞哥棒棒哒!
        </article>
        <aside>
            aside:<br />大神小班
        </aside>
    </main>
并给它添加一个背景色:
        main{
            background-color:grey;
        }


让article和aside都浮动起来,你就看不到main的背景色了。

这是因为当article和aside浮动起来,脱离原有的文档流,main里面就没有内容,所以它就“坍塌”了。


清除浮动(clear)

可以给一个元素添加CSS样式clear,清除其上元素浮动对自己造成的影响。可选项有:


  • left:清除上面左浮动元素对自己的影响
  • right:清除上面右浮动元素对自己的影响
  • both:清除上面左右浮动元素对自己的影响

使用clear是非常普遍的。

甚至还有这样一种流行的做法:

    <div style="clear:both;"></div>

把这样一个空的div元素添加到main的底部,就可以撑起main元素,避免上文所述的,因article和aside浮动造成的main元素坍塌!


定位(position)

在CSS中使用定位,需要指定两个要素:


样式


代码 参照物 脱离文档流
固定定位 position:fixed 显示屏幕

position:absolute
最近一个定位的父元素,直到最外层元素
相对定位
position:relative
本来应该在的位置
不会


偏移量

所有定位的偏移都可由top/right/bottom/left指定,如下图所示:


偏移量既可以是正数也可以是负数,以top为例,正数就是向下偏移,负数就是向上偏移。

注意:通常我们只需要指定两个偏移量就能确定元素位置,不要画蛇添足引起冲突。


z-index

和浮动不同,定位会在脱离文档原有的、由x轴(横向)和y轴(纵向)构成的平面,产生一层一层的“z轴”上的顺序(z-index)。

于是,定位元素和未定位元素、定位元素和定位元素之间就会形成重叠。

CSS通过指定z-index来决定哪一个元素在上面哪一个元素在下面:z-index可以设置为负数,z-index越大,越显示在前面。

PS不要因为定位介绍得更简单,以为它更简单,就大量使用定位,介绍得少是因为使用得少,^_^


作业

  1. 使用浮动实现如下图所示效果:


  2. 使用浮动完成:
    1. 页头(导航条下拉/隐藏除外)
    2. 页脚
    3. 页头下“消息条”内容
  3. 使用定位完成:
    1. “帮助和反馈”标签
    2. “返回”标签


CSS 布局 浮动 定位
赞: 0 踩: 0

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 0

前端基础


HTML和CSS

HTML最常用的标签和属性,含HTML5的语义标签和新属性,但不包含需要JavaScript操作的HTML5 API,以及CSS基础(简述CSS 3动画相关),以及bootstrap.js以外的Bootstrap的内容。

Javascript和JQuery

Javascript的基本语法,JQuery类库(含Ajax),以及Bootstrap的JavaScript组件部分

全部
关键字



帮助

反馈