视觉设计(3)

浮动与清除浮动

• float为浮动属性，用来调整元素的布局。常用left、right两个值来使元素靠左或靠右，元素会如同position: absolute的效果，不在画面上排列，而是依照其值(left or right)排列。
• 另外可以搭配clear属性来改变排版，常用属性值如下:
  • clear: left会让元素本身不能和前面的靠左浮动元素相邻。
  • clear: right会让元素本身不能和前面的靠左浮动元素相邻。
  • clear: both会让元素本身不能和前面的任何浮动元素相邻。

范例

<!-- HTML -->
<div class="left">left</div>
<div class="right">right</div>
<div class="clear">clear both</div>
<!-- CSS -->
body {
  height: 190px;
  text-align: center;
  border: 1px solid;
  padding: 10px;
}
.left {
  width: 80px;
  height: 80px;
  background: lightgreen;
  border: 10px solid green;
  float: left;
}
.right {
  width: 80px;
  height: 150px;
  background: skyblue;
  border: 10px solid blue;
  float: right;
}
.clear {
  width: 500px;
  height: 20px;
  border: 1px solid;
  clear: left; /* (right | both | none) */
}

显示效果如下

上方为无设定clear属性或设定clear: none;的效果，可以发现蓝绿方块皆"浮"在上方，因此白色长条贴着上方排列。

上方使用clear: left，可以发现白色长条不与前方靠左浮动的元素相邻，因此排在绿色方块之下，而忽略依旧浮动的蓝色方块。

将clear的值改为right，则白色长条不与前方靠右浮动的元素相邻，因此排在蓝色方块下方。

设定clear: both会使白色长条不与前方浮动元素相邻，正好与clear: right效果相同。

*注: 若不了解浮动的定义，可以多做练习。正常来说，靠左浮动或靠右浮动其中之一会等同於clear: both的效果，网路上也有人分享，甚至在使用clear属性时可以多用clear: both会方便得多。

重叠顺序

• 对於已经定位的元素(position: absolute | relative | fixed | sticky)，可以藉由z-index属性来改变重叠的先後顺序。其值通常使用auto或整数，数字越大，元素排序越上方。

范例

<!-- HTML -->
<div class="box green">left</div>
<div class="box blue">right</div>
<div class="box orange">clear both</div>
<!-- CSS -->
body {
  height: 200px;
  text-align: center;
  border: 1px solid;
  padding: 10px;
}
.box {
  width: 160px;
  height: 80px;
  position: absolute;
}
.green {
  background: lightgreen;
  border: 10px solid green;
  z-index: 2;
}
.blue {
  top: 60px;
  left: 160px;
  background: skyblue;
  border: 10px solid blue;
  z-index: 3;
}
.orange {
  top: 120px;
  left: 320px;
  background: orange;
  border: 10px solid coral;
  z-index: 4;
}

显示效果如下

注意上方z-index的值越大，则重叠位置越上方，也等同於原来的配置: html标签越下方的元素，重叠位置越上方。

上方将蓝色方块的z-index改为5，它的位置顺位变为最高。

上方将蓝色方块的z-index改为-1，它的位置顺位变为最低。

元素置中

• 想要将元素在画面中置中可以用先前提过的margin快速设定，将其值设为auto即可。
• <img>元素也可以使用margin: auto;来置中，但必须先设定display: block;。

范例

<!-- HTML -->
<div></div>
<!-- CSS -->
div {
  width: 100px;
  height: 100px;
  background: skyblue;
  margin: auto;
}

显示效果如下

可以看到蓝色方块左右的空白被平均分配。

内容来源:
freeCodeCamp|CodePen