论坛 › 马黑黑教程专版 › 使用float实现局部区域水平方向的布局

马黑黑 发表于 2023-4-5 19:35

使用float实现局部区域水平方向的布局

本帖最后由 马黑黑 于 2023-4-5 19:46 编辑

在flex和grid布局出现以前，float配合div盒子进行网页布局大行其道，和table布局不分上下，且显得更高端。时至今日，float和table都退出了布局领域，但它们在布局上仍然有用武之地，本帖讲讲float布局的局域应用：特定区域下的水平方向布局。

float是一个标准的CSS属性，它能令元素脱离文档流，统一向左或向右浮动：

.lFloat {
    float: left;
}

.rFloat {
    float: right;
}

以上两个类选择器，.lFloat 和 .rFloat，会使如下盒子向左、向右浮动：

<span class="lFloat">向左浮动</span>
<span class="rFloat">向右浮动</span>

float 有一个特殊的强制性手段：任何元素使用了 float 属性，都变成了块状级层的元素，且都会按设定（left或right）浮动，使得元素脱离了自然的文档流，即元素不会在它原本呆着的地方，而是向左或向右浮动。如果多个元素同时使用了相同值的 float 属性，则这些元素会统一往一个方向浮动，一个挨着一个依次排列。

根据这一强制特性，我们可以这么设计网站的导航条：导航条，#nav，做父元素用，其下有诸多子元素，前面的子元素 float 属性都设置为 left，最后一个子元素的 float 属性设置为 right，看代码：

<style>
#nav {
      margin: auto;
      width: 700px;
      height: 30px;
      background: hsl(60,0%,90%);
      border-bottom: 2px solid hsla(60,90%,10%,.8);
}
#nav > span {
      width: 80px;
      height: 100%;
      text-align: center;
      color: snow;
      background: hsla(60,60%,20%,.6);
      margin: 1px;
      float: left;
}
#nav > span:hover {
      background: hsla(60,90%,10%,.8);
}
#nav > span:nth-last-child(1) {
      float: right;
}
</style>

<div id="nav">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
</div>上述代码中，#nav 是导航条父元素的选择器，nav 里面使用 span 标签做导航菜单项目，共六个，前面五个都是向左浮动，最后一个向右浮动，这样它们刚好占满整个 nav 导航条，无需清除浮动（float的最大问题是两头剩余的浮动空间会让页面混乱，所以通常需要清除浮动）。

效果请看楼下——

马黑黑 发表于 2023-4-5 19:35

<style>
#nav {
        margin: auto;
        width: 700px;
        height: 30px;
        background: hsl(60,0%,90%);
        border-bottom: 2px solid hsla(60,90%,10%,.8);
}
#nav > span {
        width: 80px;
        height: 100%;
        text-align: center;
        color: snow;
        background: hsla(60,60%,20%,.6);
        margin: 1px;
        float: left;
}
#nav > span:hover {
        background: hsla(60,90%,10%,.8);
}
#nav > span:nth-last-child(1) {
        float: right;
}
</style>

<div id="nav">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
</div>

雨中悄然 发表于 2023-4-5 20:02

一二三靠左，四五六靠右不好么{:4_173:}

马黑黑 发表于 2023-4-5 20:26

雨中悄然 发表于 2023-4-5 20:02
一二三靠左，四五六靠右不好么

根据需要来

红影 发表于 2023-4-5 20:31

这次我倒是去查了一下含义。感觉这三个单词都见过{:4_173:}

马黑黑 发表于 2023-4-5 20:34

红影 发表于 2023-4-5 20:31
这次我倒是去查了一下含义。感觉这三个单词都见过

flex和grid我专门介绍过，float是一个常规单词，浮动的意思

千羽 发表于 2023-4-5 21:09

黑黑老师又一个教案出炉，辛苦了，送花花{:4_187:}{:4_204:}

马黑黑 发表于 2023-4-5 21:33

千羽 发表于 2023-4-5 21:09
黑黑老师又一个教案出炉，辛苦了，送花花

谢花

红影 发表于 2023-4-5 22:29

马黑黑 发表于 2023-4-5 20:34
flex和grid我专门介绍过，float是一个常规单词，浮动的意思

怪不得都看着眼熟呢{:4_173:}

马黑黑 发表于 2023-4-5 23:42

红影 发表于 2023-4-5 22:29
怪不得都看着眼熟呢

有点印象

红影 发表于 2023-4-6 09:47

马黑黑 发表于 2023-4-5 23:42
有点印象

是的，尤其前两个，黑黑都专门介绍并做了相关帖子的。

马黑黑 发表于 2023-4-6 12:07

红影 发表于 2023-4-6 09:47
是的，尤其前两个，黑黑都专门介绍并做了相关帖子的。

是的吧

红影 发表于 2023-4-6 15:13

马黑黑 发表于 2023-4-6 12:07
是的吧

记得那会都跟在后面做小报玩{:4_173:}

马黑黑 发表于 2023-4-6 17:39

红影 发表于 2023-4-6 15:13
记得那会都跟在后面做小报玩

小报和做学生时做手抄报差不多，很多人都会喜欢

雨中悄然 发表于 2023-4-6 17:47

马黑黑 发表于 2023-4-5 20:26
根据需要来

目前看来没需要{:4_170:}

红影 发表于 2023-4-6 21:21

马黑黑 发表于 2023-4-6 17:39
小报和做学生时做手抄报差不多，很多人都会喜欢

那会用的就是这两个布局。

马黑黑 发表于 2023-4-6 21:43

红影 发表于 2023-4-6 21:21
那会用的就是这两个布局。

分栏也是不错的，CSS有个分栏属性

红影 发表于 2023-4-6 22:31

马黑黑 发表于 2023-4-6 21:43
分栏也是不错的，CSS有个分栏属性

好多东西啊，都来不及学。呵呵，又困了，先下了，晚安{:4_430:}

马黑黑 发表于 2023-4-6 22:32

红影 发表于 2023-4-6 22:31
好多东西啊，都来不及学。呵呵，又困了，先下了，晚安

88

查看完整版本: 使用float实现局部区域水平方向的布局