浅谈CSS浮动的特性

下面将为大家详细讲解“浅谈CSS浮动的特性”的完整攻略。

什么是CSS浮动

CSS浮动（float）是一种常见的布局方式，可以让元素沿着浏览器的可用空间浮动，可以自动与其他元素结合，并且可以清除浮动。CSS浮动通常用于布局多列文本、图像和菜单等元素。

如何使用CSS浮动

可以通过在CSS样式表中使用“float”属性来使用CSS浮动。下面是一个例子，展示如何使用CSS浮动将两个Div元素排成一行：

.div1 {
  float: left;
  width: 50%;
}

.div2 {
  float: right;
  width: 50%;
}

在此示例中，Div1将浮动到页面的左侧，并占用页面宽度的50％。Div2将浮动到页面的右侧，并占用页面宽度的50％。这将使两个Div元素排成一行。

CSS浮动的特点

1. 浮动元素会脱离文档流
   当一个元素浮动时，它的位置不再占用文档流的空间。这就意味着，相邻元素会占用浮动元素所占的空间，而浮动元素则可以覆盖在其他元素之上。

2. 浮动元素会自动排列
   当多个元素浮动时，它们会根据浮动对齐方式，自动排列在一起。在默认情况下（即浮动方式为“left”或“right”），元素会从上到下、从左到右依次排列。

3. 满行会自动换行
   当浮动元素的宽度过大时，会导致该元素不能跟随其他元素排列在一起，此时浮动元素会自动换行。

实例说明

示例1

下面是一个使用CSS浮动实现网页自适应布局的例子，其中左右两侧的侧边栏浮动到页面两侧，主体内容在两侧侧边栏之间堆叠：

<div id="wrapper">
  <div id="header">Header</div>
  <div id="sidebar-left">Sidebar Left</div>
  <div id="sidebar-right">Sidebar Right</div>
  <div id="main-content">Main Content</div>
  <div id="footer">Footer</div>
</div>

#wrapper {
  width: 100%;
  margin: 0 auto;
}

#header {
  height: 60px;
  background-color: #ccc;
}

#sidebar-left {
  float: left;
  width: 200px;
  height: 300px;
  background-color: #eee;
}

#sidebar-right {
  float: right;
  width: 200px;
  height: 300px;
  background-color: #ddd;
}

#main-content {
  margin-left: 200px;
  margin-right: 200px;
  height: 500px;
  background-color: #fff;
}

#footer {
  clear: both;
  height: 100px;
  background-color: #aaa;
}

在此示例中，Wrapper div占据100％的页面宽度，并将自己居中（“margin: 0 auto”）。Header div设置为固定高度，Sidebar Left和Sidebar Right div设置为200像素的宽度和300像素的高度，Main Content div占用剩余页面宽度，并设置为500像素的高度。Footer div清除了浮动并设置了一个固定高度。

示例2

下面是另一个使用CSS浮动实现网页布局的例子，其中左侧是一个垂直导航菜单，右侧是主体内容：

<div id="wrapper">
  <div id="nav-menu">
    <ul>
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li><a href="#">Menu Item 3</a></li>
      <li><a href="#">Menu Item 4</a></li>
    </ul>
  </div>
  <div id="content">
    <h1>Page Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel libero facilisis, nec tempus neque consequat. Etiam vestibulum quam vitae molestie varius. Ut nunc velit, elementum vel sollicitudin in, tristique a lorem. In sed posuere lacus. Curabitur nisi nulla, lobortis quis justo et, euismod bibendum sapien. </p>
  </div>
</div>

#wrapper {
  width: 100%;
  margin: 0 auto;
}

#nav-menu {
  float: left;
  width: 25%;
  background-color: #fff;
}

#nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav-menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

#nav-menu a:hover {
  background-color: #ddd;
}

#content {
  float: right;
  width: 75%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
}

#content h1 {
  color: #333;
}

在此示例中，Nav Menu div设置为25％的页面宽度，并且是左浮动。该div包含一个无序列表，每项都是一个链接。Content div设置为75％的页面宽度，并且是右浮动。Content div包含页面标题和主要内容。Nav Menu的链接设置为块级显示，以便它们占据整个宽度。Content div设置为使用盒模型和一些填充以适当地放置标题和内容。