CSS基础-浮动

动

浮动是为了元素标签的并排显示问题。

我们在浏览网页的时候，经常会看到几个 div 块是可以并排显示的，浮动就是解决这样问题的方法之一。

float属性有以下的值

float: left; 左浮动

float: right 右浮动

浮动的特点

浮动主要针对的是并排显示的盒子而言。
在一个父容器的盒子里，兄弟元素之间要浮动必须都浮动。
父容器必须要有一个足够的宽度，否则不足以使得各个子元素之间并排展示。
一个父容器的盒子内，兄弟元素会按照顺序贴靠，如果是左浮动，就往左贴合；如果是右浮动，就往右贴合。如果发现贴合的盒子后没有足够的空间，则会在寻找前一个兄弟元素进行贴靠。直到空间合适为止。
浮动的元素已经脱离了标准的HTML文档流，不再区分块级元素、行内元素并且一律能设置宽度和高度，即使它是span标签或者a标签

一个浮动的例子

<!--一个浮动的例子-->
<style>


    .box1 {
        width: 600px;
        height: 200px;
        border: 1px solid #000;
    }


    .box1 .con1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }


    .box1 .con2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }


    .box1 .con3 {
        width: 201px;
        height: 200px;
        background-color: yellowgreen;
        float: left;
    }
</style>
<div class="box1">
        <div class="con1"></div>
        <div class="con2"></div>
        <div class="con3"></div>
</div>

一个顺序贴靠的例子

<!--  一个顺序贴靠的例 子-->
<!-- 以下代码中 兄弟元素 con1， con2， con3 之间会进行顺序贴靠-->
<!-- con3 在贴靠 con2 的时候，发现父容器的宽度只能是400px, 分别被con1 和 con2 占据， 所以con3 会找 cont1 贴靠，最终con3 位于 con1右边， con2下边 -->


<style>


  .box1 {
      width: 400px;
      height: 200px;
      border: 1px solid #000;
  }


  .box1 .con1 {
      width: 200px;
      height: 200px;
      background-color: orange;
      float: left;
  }


  .box1 .con2 {
      width: 200px;
      height: 100px;
      background-color: blue;
      float: left;
  }


  .box1 .con3 {
      width: 200px;
      height: 100px;
      background-color: yellowgreen;
      float: left;
  }
</style>
<div class="box1">
  <div class="con1"></div>
  <div class="con2"></div>
  <div class="con3"></div>
</div>

清除浮动

清除浮动是为了不影响设置浮动标签的后续的标签的布局展示。

因为，在一个父容器中，子元素浮动了，脱离了标准文档流，不在占用之前的位置，会导致无法撑开没有设置高度的父元素；从而导致后续的结构挤压，造成整个页面布局的混乱。

给父元素加个高度。在那些明确知道父容器高度的情况下，可以使用。

<style>
  * {
    margin: 0;
    padding: 0;
  }


  div {
    height: 100px;
  }
  p {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: red;
  }
</style>


<body>
  <div>
    <p></p>
    <p></p>
  </div>


  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>

后续元素增加 clear:both ,清除前面元素对自己的影响。

<style>
    * {
        margin: 0;
        padding: 0;
    }


    .box2 {
        margin-top: 20px;
        clear: both;
    }
    p {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        background-color: red;
    }
</style>


<body>
<div>
    <p></p>
    <p></p>
</div>


<div class="box2">
    <p></p>
    <p></p>
    <p></p>
</div>
</body>

浮动的父容器添加后续伪元素，clear:both ，清除浮动对后续元素的影响(推荐方式)。

<style>
  * {
      margin: 0;
      padding: 0;
  }


  .cleafix::after {
      content: '';
      clear: both;
      display: block
  }


  p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      background-color: red;
  }
</style>


<body>


<div class="cleafix">
  <p></p>
  <p></p>
</div>


<div class="cleafix">
  <p></p>
  <p></p>
  <p></p>
</div>
</body>

额外的空标签，在浮动元素的父盒子之后添加一个空标签，空标签上添加 clear:both 属性。

<style>
* {
  margin: 0;
  padding: 0;
}


.clearboth {
  clear: both;
}


p {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: red;
}
</style>


<body>
<div>
<p></p>
<p></p>
</div>


<div class="clearboth"></div>


<div>
<p></p>
<p></p>
<p></p>
</div>
</body>

浮动元素的父容器添加 overflow:hidden , 使得子元素的浮动只能作用在父容器内。

页面布局中，有两个非常常用的CSS属性。它们巧妙的控制着块级元素们之间的位置，灵活的让块级元素在一行内显示或者另起一行。说到这里，相信大家已经猜出来了，这两个属性就是控制块级元素浮动的属性。整个页面布局过程中，浮动属性的使用频率是最高的。今天，小海老师就来带领大家一同认识这两个神奇的CSS属性。

承接文章：发挥个人的优势，踏踏实实的学习前端开发，小海为你传授学习心得

技术等级：初级 | 适合前端开发的初学者阅读学习。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

一、浮动属性：

CSS技术使用float属性来实现块级元素的浮动效果。

CSS技术使用float属性实现浮动效果

该属性可以有下列取值：

left，控制块级元素左浮动。
right，控制块级元素右浮动。

属性说明：我们都知道，块级元素之间默认情况下是独占一行的。也就是说，两个在代码中紧密相连的块级元素，它们的摆放位置是一个在上一行，另一个在下一行。尽管通过width和height属性为块级元素设置了大小，使得块级元素无法占满整个行，但是块级元素右侧空余的位置仍然不允许出现任何内容。

让我们一同来看下列实例：

HTML代码如下所示：

<div id=”box01”></box>
<div id=”box02”></box>

CSS代码如下所示：

#box01,#box02{
width:200px; height:100px;
}
#box01{background-color:#ff5857;}
#box02{background-color:#5857ff;}

上述代码的运行结果如下图所示，这张图为我们展示了两个块级元素默认的位置摆放。

展示两个块级元素的默认位置

如果我想让两个块级元素在一行内显示该如何实现呢？这就需要float属性登场了。

将#box01的CSS代码中添加如下属性：float:left，会发生什么情况呢？同学们实践操作一下，我们会发现，屏幕中就只剩下红色的块级元素了。那蓝色的#box02去哪里了呢？其实#box02响应了#box01浮动的号召，和#box01一同出现在同一行了，只是被压在了红色的#box01的下面。

解决方法就是让蓝色的#box02也添加上 float:left的属性。这样，两个块级元素就可以共同出现在一行了。下图为我们展示了这样的效果。

展示两个块级元素的左浮动位置

下面让我们再看一个实例，这个实例中我们为两个块级元素添加一个容器。

HTML代码如下所示：

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

我们设置容器#box的宽度为400px。内部的两个块级元素：.boxLeft的宽度设置为150px；.boxRight的宽度设置为100px。要求让这两个内部的块级元素在一行内显示，并且分布到容器的两端。

CSS代码如下所示：

#box{
width:400px; height:100px;
background-color:#cccccc;
}
#box .boxLeft{
width:150px; height:100px;
background-color:#ff5857;
float:left;
}
#box .boxRight{
width:100px; height:100px;
background-color:# 5857 ff;
float:right;
}

我们可以看到，在.boxRight对象上，我们添加了float:right的CSS属性，让这个块级元素发生了右浮动，则该元素跑到了容器的最右侧。下图为我们展示了这样的效果。

展示两个块级元素的左右浮动位置

浮动属性的使用结论：

若希望多个块级元素在一行内显示，则这几个块级元素都要具备float浮动属性。

二、清除浮动属性：

CSS技术使用clear属性来实现块级元素的清除浮动效果。

CSS技术使用clear属性设置清除浮动效果

该属性可以有下列取值：

left，清除块级元素的左浮动效果。
right，清除块级元素的右浮动效果。
both，清除块级元素的两端浮动效果。

属性说明：根据上面的float属性的使用，我们可想而知，一个紧跟在具有浮动属性的块级元素后面的块级元素，即使它不想和它前面的块级元素在一行内显示，也会受到前面块级元素浮动属性的影响，被压在前面块级元素的下方。

解决这个问题，可以对不希望和前面块级元素在同一行显示的块级元素使用清除浮动属性。

下面让我们来看这个实例：

HTML代码如下所示：

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

CSS代码如下所示（#box .boxRIght）：

#box .boxRight{
width:100px; height:100px;
background-color:# 5857ff;
clear:left;
}

因为.boxRight具备clear:left属性，所以即使.boxLeft使用了float:left属性，它们也仍旧分布在两行，不会在同一行显示。就好像没有过使用任何浮动效果似的。

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

结合前面所学的CSS知识，使用今天的浮动属性，可以做一个简单的导航栏。那么下一篇文章中，小海老师会带领大家一同利用最近的所学，做一个水平放置的导航栏。效果非常酷炫，希望正在学习前端开发的同学们千万不要错过。

SS中的浮动（Floats）、定位（Positioning）和显示（Display）属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景，帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。

浮动（Float）

浮动是CSS中用于实现元素排列的一种方式，它可以让元素脱离正常的文档流，并可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。

.element {
  float: left; /* 或者 'right' */
}

使用场景

文字环绕图片。
创建水平导航栏。
无网格系统时的列布局。

注意事项

清除浮动（Clearing Floats）：使用clear属性可以防止元素被浮动元素覆盖。

.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}

包含浮动（Containing Floats）：浮动元素的父容器可能不会扩展以包含浮动的子元素，可以通过清除浮动或使用其他技术（如overflow）来解决这个问题。
浮动塌陷（Float Collapse）：浮动元素不占据空间，可能导致父元素高度塌陷。

定位（Position）

定位属性允许你控制元素的位置，它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用场景

相对定位（Relative Positioning）：元素相对于其正常位置进行偏移。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

绝对定位（Absolute Positioning）：元素相对于最近的已定位父元素进行定位。

.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}

固定定位（Fixed Positioning）：元素相对于视口进行定位，即使页面滚动也不会移动。

.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}

粘性定位（Sticky Positioning）：元素基于用户的滚动位置在相对和固定定位之间切换。

.sticky-element {
  position: sticky;
  top: 10px;
}

注意事项

定位元素可能会脱离文档流，影响周围元素的布局。
z-index属性可以控制堆叠顺序。
绝对定位元素的容器应有position: relative;，以便正确定位。

显示（Display）

display属性是CSS中最重要的用于控制布局的属性之一，它定义了元素如何显示在页面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用场景

块级元素（Block）：display: block;使元素表现为块级，占据新的行。

.block-element {
  display: block;
}

内联元素（Inline）：display: inline;使元素在文本行中显示，不开始新行。

.inline-element {
  display: inline;
}

内联块元素（Inline-Block）：display: inline-block;允许元素并排排列，同时拥有块级元素的宽度和高度属性。

.inline-block-element {
  display: inline-block;
}

弹性盒子（Flex）：display: flex;创建了一个弹性容器，其子元素可以灵活地在容器内排列。

.flex-container {
  display: flex;
}

网格（Grid）：display: grid;创建了一个网格容器，可以定义行和列以及在网格内放置元素。

.grid-container {
  display: grid;
}

隐藏元素（None）：display: none;将元素隐藏，且不为元素保留空间。

.hidden-element {
  display: none;
}

注意事项

使用display: none;与visibility: hidden;的区别在于后者仍保留元素占据的空间。
display: flex;和display: grid;为现代布局提供了更多控制，通常比浮动和定位更优。

示例

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS样式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在这个例子中，我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航，以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚，并使用固定定位为页面添加了一个始终可见的固定元素。最后，我们使用了overflow: hidden;来清除头部中浮动元素的影响。

结语

浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性，前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展，我们也需要不断学习和适应新的CSS特性，以保持我们技能的前沿性。

在线咨询

上一篇：HTML5源码库适应手机端的jQuery图片滑块动
下一篇：用JavaScript的Brain.js训练人工智能

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS基础-浮动

动

清除浮动

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

小海教材

小海声明

文章预告

浮动（Float）

使用场景

注意事项

定位（Position）

使用场景

注意事项

显示（Display）

使用场景

注意事项

示例

HTML结构

CSS样式

结语

您的项目需求