上一节:
下一节:

  CSS 浮动

  • float属性

    float属性用于定位和格式化内容，例如让图像浮动到容器中的文本。 float属性可以具有以下值之一：
    • left - 元素浮动到其容器的左侧
    • right-元素浮动到其容器的右侧
    • none - 元素不浮动（将显示在文本中出现的位置）。这是默认的
    • inherit - 该元素继承其父级的float值
    在最简单的用途中，float属性可用于在图像周围包装文本。 有浮动的实例 
    img {
     float: left;
   }
    尝试一下
    没有浮动的实例 
    img {
     float: none;
   }
    尝试一下

  • clean属性

    clear属性指定哪些元素可以浮动在已清除元素旁边以及哪一侧。clear属性可以具有以下值之一：
    • none - 允许两侧浮动元素。这是默认的
    • left - 左侧不允许浮动元素
    • right - 右侧不允许浮动元素
    • both - 左侧或右侧不允许浮动元素
    • inherit - 元素继承其父级的clear值
    clear属性的最常用方法是在元素上使用float属性之后。清除浮动时，应该将clear与float匹配：如果一个元素浮动到左边，那么你应该清除左边。您的浮动元素将继续浮动，但清除的元素将显示在网页下方。以下示例清除左侧的浮动。意味着左侧（div的）不允许浮动元素： 
    div {
     clear: left;
   }
    尝试一下

  • 清除Hack

    如果一个元素高于包含它的元素，并且它被浮动，它将在其容器外“溢出”，然后我们可以添加overflow:auto;到包含元素来解决这个问题： 
    .clearfix {
         overflow: auto;
       }
    尝试一下
    overflow:auto只要您能够控制边距和填充（否则您可能会看到滚动条），clearfix效果很好。在新的，现代化的clearfix黑客，使用更安全，下面的代码被用于大多数网页： 
    .clearfix::after {
     content: "";
     clear: both;
     display: table;
   }
    尝试一下
    您将在后面的章节中了解有关伪元素::after的更多信息。

  • 箱格/等宽箱格

    有了这个float属性，很容易并排浮动内容盒： 
    * {
         box-sizing: border-box;
       }

       .box {
         float: left;
         width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
         padding: 50px; /* if you want space between the images */
       }
    尝试一下
    您可以轻松地并排创建三个浮动框。但是，当您添加扩大每个框宽度的内容（例如填充或边框）时，框将会中断。box-sizing属性允许我们在框的总宽度（和高度）中包括填充和边框，确保填充保持在框内并且不会破坏。

  • 图像并排

    盒子网格也可用于并排显示图像： 
    .img-container {
         float: left;
         width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
         padding: 5px; /* if you want space between the images */
       }
    尝试一下

  • 等高箱

    在前面的示例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相同高度的浮动箱并不容易。但是，快速修复是设置固定高度，如下例所示： 
    .box {
         height: 500px;
       }
    尝试一下
    但是，这不是很灵活。如果您可以保证这些框中的内容总是包含相同数量的内容，那就没问题了。但很多时候，内容并不相同。如果您在手机上尝试上述示例，您将看到第二个框的内容将显示在框外。这就是CSS3 Flexbox派上用场的地方 - 因为它可以自动拉伸盒子和最长盒子一样长： 
    .flex-container {
         display: flex;
         flex-wrap: nowrap;
         background-color: DodgerBlue;
       }

       .flex-container .box {
         background-color: #f1f1f1;
         width: 50%;
         margin: 10px;
         text-align: center;
         line-height: 75px;
         font-size: 30px;
       }
    尝试一下
    Flexbox的唯一问题是它在Internet Explorer 10或更早版本中不起作用。

  • 导航菜单

    使用float超链接列表创建水平菜单： 
    ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         overflow: hidden;
         background-color: #333;
       }

       li {
         float: left;
       }
    尝试一下

  • Web布局示例

    使用float属性执行整个Web布局也很常见： 
    * {
         box-sizing: border-box;
       }

       .header, .footer {
         background-color: grey;
         color: white;
         padding: 15px;
       }

       .column {
         float: left;
         padding: 15px;
       }
    尝试一下

  • 所有CSS浮动属性

    属性 描述
    box-sizing 定义如何计算元素的宽度和高度：它们是否包括填充和边框
    clear 指定哪些元素可以在已清除元素旁边以及哪一侧浮动
    float 指定元素应如何浮动
    overflow 指定内容溢出元素框时会发生什么
    overflow-x 指定如果内容的左/右边缘溢出元素的内容区域，该如何处理
    overflow-y 如果内容溢出元素的内容区域，则指定如何处理内容的顶部/底部边缘

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: