CSS Float浮动_菜鸟教程

float 属性创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

float 的可能值为：left或right或none。

left - 使左边缘接触包含块的左边缘或另一浮动块的右边缘。
right - 使右边缘接触包含块的右边缘或另一浮动块的左边缘。
none - 元素不浮动。

以下代码显示了float属性。


<!DOCTYPE HTML>
<html>
<head>
<style>
p.toggle {
  float: left;
  border: medium double black;
  width: 40%;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
  <p class="toggle">This is a test.</p>
  <p class="toggle">This is a test.</p>
  <p>This is a test.</p>
  <p>
    <button>Left</button>
    <button>Right</button>
    <button>None</button>
  </p>
  <script>
    var buttons = document.getElementsByTagName("BUTTON");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function(e) {
        var elements = document.getElementsByClassName("toggle");
        for (var j = 0; j < elements.length; j++) {
          elements[j].style.cssFloat = e.target.innerHTML;
        }
      };
    }
  </script>
</body>
</html>

上面的代码呈现如下：

Clear

默认情况下，浮动元素将堆叠在一起。

clear属性清除堆叠。

它指定浮动元素的一个或两个边缘必须不与另一个浮动元素的边缘邻接。

其可能的值为：

left - 元素的左边缘可能不与另一个浮动元素邻接。
right - 元素的右边缘可能不与另一个浮动元素邻接。
both - 两边都不能与另一个浮动元素邻接。
none - 元素不被清除，并且任一边缘可以邻接另一个浮动元素。

以下代码显示了正在使用的clear属性。


<!DOCTYPE HTML>
<html>
<head>
<style>
p.toggle {
  float: left;
  border: medium double black;
  width: 40%;
  margin: 2px;
  padding: 2px;
}
p.cleared {
  clear: left;
}
</style>
</head>
<body>
  <p class="toggle">This is a test.</p>
  <p class="toggle  cleared">This is a test.</p>
  <p>This is a test.</p>
  <p>
    <button>Left</button>
    <button>Right</button>
    <button>None</button>
  </p>
  <script>
    var buttons = document.getElementsByTagName("BUTTON");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function(e) {
        var elements = document.getElementsByClassName("toggle");
        for (var j = 0; j < elements.length; j++) {
          elements[j].style.cssFloat = e.target.innerHTML;
        }
      };
    }
  </script>
</body>
</html>

上面的代码呈现如下：