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

马黑黑

在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，看代码：

1. <style>
   
2. #nav {
   
3.         margin: auto;
   
4.         width: 700px;
   
5.         height: 30px;
   
6.         background: hsl(60,0%,90%);
   
7.         border-bottom: 2px solid hsla(60,90%,10%,.8);
   
8. }
   
9. #nav > span {
   
10.         width: 80px;
    
11.         height: 100%;
    
12.         text-align: center;
    
13.         color: snow;
    
14.         background: hsla(60,60%,20%,.6);
    
15.         margin: 1px;
    
16.         float: left;
    
17. }
    
18. #nav > span:hover {
    
19.         background: hsla(60,90%,10%,.8);
    
20. }
    
21. #nav > span:nth-last-child(1) {
    
22.         float: right;
    
23. }
    
24. </style>
    
25. 
    
26. <div id="nav">
    
27.         <span>1</span>
    
28.         <span>2</span>
    
29.         <span>3</span>
    
30.         <span>4</span>
    
31.         <span>5</span>
    
32.         <span>6</span>
    
33. </div>

复制代码

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

效果请看楼下——

马黑黑

1 2 3 4 5 6

雨中悄然

一二三靠左，四五六靠右不好么

马黑黑

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

根据需要来

红影

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

马黑黑

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

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

千羽

黑黑老师又一个教案出炉，辛苦了，送花花

马黑黑

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

谢花

红影

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

怪不得都看着眼熟呢

马黑黑

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

有点印象

红影

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

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

马黑黑

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

是的吧

红影

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

记得那会都跟在后面做小报玩

马黑黑

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

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

雨中悄然

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

目前看来没需要

红影

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

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

马黑黑

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

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

红影

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

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

马黑黑

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

88