3.2 CSS浮动属性float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

float属性值：

  • left：元素向左浮动
  • right：元素向右浮动
  • none：元素不浮动
  • inherit：从父级继承的浮动属性

clear属性可去掉浮动属性，clear属性值：

  • left：去掉元素向左浮动
  • right：去掉元素向右浮动
  • both：左右两侧均去掉浮动
  • inherit：从父级继承来的clear值

1. 示例

(1) 普通流(默认静态布局)

  • float.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>
  • style_float.css
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
}
#div2{
    width: 100px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}

普通流.png

(2) 元素向左浮动

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}

备注：红色元素向左浮动。红色遮挡了蓝色，相当于绝对布局，红色脱离了页面，不占有页面位置。

元素向左浮动.png

(2) 元素向右浮动

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: right;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}
</style>
</head>

<body>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</body>

</html>

元素向右浮动.png

(3) 所有元素向左浮动

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
</style>
</head>

<body>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</body>

</html>
所有元素向左浮动.png

(4) 浮动—主容器宽度可承载所有内容的情况

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 400px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
  </div>
</body>

</html>

浮动—主容器宽度可承载所有内容的情况.png

(5) 浮动—主容器宽度未能承载所有内容的情况

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
  </div>
</body>

</html>
浮动—主容器宽度未能承载所有内容的情况-eg1.png
<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
  </div>
</body>

</html>

浮动—主容器宽度未能承载所有内容的情况-eg2.png

(6) 继承父级浮动属性

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
      Hello
  </div>
</body>

</html>
继承父级浮动属性-eg1.png
<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
      Hello World
  </div>
</body>

</html>
继承父级浮动属性-eg2.png
<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
      HelloWorld!
  </div>
</body>

</html>

继承父级浮动属性-eg3.png

(5) 去掉继承于父级的浮动属性

<html>
<head>
<style type="text/css">
#div1{
    width: 100px;
    height: 150px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
    float: left;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}
#div{
    width: 300px;
    height: 500px;
    background-color: darkgray;
}
#text{
    clear: left;
}
</style>
</head>

<body>
  <div id="div">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
      <div id="text">HelloWorld!</div>
  </div>
</body>

</html>
去掉继承于父级的浮动属性.png

2. float应用

(1) 实现瀑布流布局效果

  • float_practice.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float属性实现瀑布流布局效果</title>
    <link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="mydiv">
        <ul>
            <li><img src="../img/1.jpg"></li>
            <li><img src="../img/2.PNG"></li>
            <li><img src="../img/3.PNG"></li>
        </ul>
        <ul>
            <li><img src="../img/4.PNG"></li>
            <li><img src="../img/5.PNG"></li>
            <li><img src="../img/6.PNG"></li>
        </ul>
        <ul>
            <li><img src="../img/7.PNG"></li>
            <li><img src="../img/8.PNG"></li>
            <li><img src="../img/9.PNG"></li>
        </ul>
    </div>
</body>
</html>
  • style_float.css
/*通配符选择器*：所有的标签或元素*/
*{
    margin: 0px;
    padding: 0px;
}
#mydiv{
    width: 950px;
    height: auto;
    margin: 20px auto;
}
ul{
    width: 250px;
    float: left;
}
li{
    list-style: none;
}
img{
    width: 200px;
    height: 200px;
}

通配符选择器*： 所有的标签或元素
auto ： 自适应

瀑布流效果布局.png

(2) 使文字环绕在图像周围(float浮动的最初目的)

<html>
<head>
<style type="text/css">
img 
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>
图片浮动.png

问题：既然浮动元素脱离了文档流，为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢？为了明白这个问题，必须先弄明白几个问题：
① 浮动的目的：最初浮动只能用于图像，目的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。
② 绝对定位与浮动的区别：绝对定位是将元素彻底从文档流删除，该元素不会影响其他元素的布局；而浮动虽然也会将元素从文档的正常流中删除，并把元素向左或右边浮动，但是该浮动元素还是会影响布局，即：一个元素浮动时，其他内容会“环绕”该元素，避免其他内容被浮动的元素覆盖掉。

(3) 实现块级元素同行排列(现在float用得最多的使用场景)

<html>
<head>
<style type="text/css">
#wrap{
    width:50%;
    background-color:gray
}
#div1{
    background-color:purple;
    float: left;
    width:50px;
    height:50px;
}
#div2 {
    float: right;
    background-color:cyan;
    width:50px;
    height:50px;
}
#div3 {
    float: right;
    background-color:olive;
    width:50px;
    height:50px;
}
#div4 {
    clear:both;
}
#content{
    background-color:pink;
    width:50%;
    height:100px;
    clear:both;
}
</style>
</head>

<body>
<div id="wrap">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4"></div>
</div>
<div id="content">
    内容
</div>
</body>

</html>
块级元素同行排列.png

拓展：元素浮动虽然使元素显示更为灵活，但同时也会带来一些问题，参考解决子元素浮动导致父元素高度塌陷的问题(清除浮动的方法)。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • #03你认真学了css？浮动+定位
    自我总结： 浮动是实现布局的一种常见方式 浮动脱离普通文档流，即页面渲染时，盒模型按标准会将父元素所设置的属性将页...
    饥人谷_远方阅读 3,192评论 0赞 0
  • css-浮动，定位
    一，文档流的概念指什么？有哪种方式可以让元素脱离文档流? 答：文档流W3C规范中并没有document flow这...
    kingBirds阅读 3,652评论 0赞 2
  • CSS 浮动(float)
    普通流(normal flow) 这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。 前面我们...
    王玉伟的伟阅读 3,276评论 0赞 1
  • 混迹职场5年了，你真的懂沟通与表达吗
    谈话是每个人一生的功课。曾经有科学家做过统计，人这一辈子和别人说过的话，是一个天文数字，以至于最后科学家用一...
    谢先生读书会阅读 3,641评论 1赞 10
  • swift 基础篇
    这里推荐一些swift的学习资料，借花献佛； swift 官方手册 3.0.1 （中文版） swift 官方手册 ...
    weiwei_js阅读 1,468评论 0赞 0

友情链接更多精彩内容