CSS浮动简介

2018-12-05  本文已影响0人  desperadokk

浮动定义

一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐 如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了
例子：

  1. 正常情况
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .ct{
      width: 300px;
      border: 3px solid green;
      margin: 100px;
    }
    .box{
      width: 100px;
      height: 100px;
      background: red;
    }
    .box2{
      background: blue;
    }
    .box3{
      background: pink;
    }
  </style>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>

2.红色右浮动

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .ct{
      width: 300px;
      border: 3px solid green;
      margin: 100px;
    }
    .box{
      width: 100px;
      height: 100px;
      background: red;
    }
    .box1{
      float: right;
    }
    .box2{
      background: blue;
    }
    .box3{
      background: pink;
    }
  </style>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>
  1. 红色左浮动，覆盖蓝色
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .ct{
      width: 300px;
      border: 1px solid green;
      margin: 100px;
    }
    .box{
      width: 100px;
      height: 100px;
      background: red;
    }
    .box1{
      float: left;
    }
    .box2{
      background: blue;
    }
    .box3{
      background: pink;
    }
  </style>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>
  1. 都向左浮动，父元素宽度为0
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .ct{
      width: 300px;
      border: 3px solid green;
      margin: 100px;
    }
    .box{
      width: 100px;
      height: 100px;
      background: red;
      float: left;
    }
    .box2{
      background: blue;
    }
    .box3{
      background: pink;
    }
  </style>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>
  1. 如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .ct{
      width: 280px;
      border: 3px solid green;
      margin: 100px;
    }
    .box{
      width: 100px;
      height: 100px;
      background: red;
      float: left;
    }
    .box2{
      background: blue;
    }
    .box3{
      background: pink;
    }
  </style>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>
  1. 卡住了
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .ct{
      width: 280px;
      border: 3px solid green;
      margin: 100px;
    }
    .box{
      width: 100px;
      height: 100px;
      background: red;
      float: left;
    }
    .box2{
      height: 80px;
      background: blue;
    }
    .box3{
      background: pink;
    }
  </style>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>
  1. 因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间（简而言之就是普通元素看不见浮动元素，但普通元素中的行盒元素可以看见浮动元素并会围绕浮动元素排列）
    例1:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .ct{
      width: 300px;
      border: 3px solid green;
      margin: 100px;
    }
    .box{
      width: 100px;
      height: 100px;
      background: red;
      float: left;
    }
    .box2{
      height: 100px;
      background: blue;
    }
    .box3{
      background: pink;
    }
    p{
      background: gray;
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="ct">
    <div class="box box1">1</div>
    <p>因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间</p>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>

例2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
 .ct{
   width: 300px;
   border: 3px solid green;
   margin: 100px;
 }
 .box1{
   height: 100px;
   width: 100px;
   background: blue;
   float: left;
   opacity: 0.5;
 }
 .box2{
   width: 120px;
   height: 120px;
   background: pink;
 }
</style>
</head>
<body>
<div class="ct">
 <div class="box box1">1</div>
 <div class="box box2">2块盒看不见浮动的box1，但文本看得见</div>
</div>
</body>
</html>

由此可见，浮动元素的背景颜色覆盖非浮动元素的背景颜色。
8.设置浮动后块级元素和行内元素都拥有inline-block的特性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    div{
      float: left;
      background: red;
    }
    span{
      float: left;
      background: blue;
      width: 150px;
      height: 50px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div>这是块级元素</div>
  <span>这是行内元素</span>
</body>
</html>
  1. 负边距
    两个浮动元素，如果因放不下导致其中一个下移，对下移的元素设置负 margin 值大于自身的宽度可将其上移
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </div>
  <style>
    .container{
      width: 400px;
      height: 400px;
      border: 2px solid green;
    }
    .box1{
      width: 300px;;
      height: 100px;
      background: pink;
      float: left;
    }
    .box2{
      width: 110px;
      height: 100px;
      border: 1px solid red;
      float: left;
    }
  </style>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </div>
  <style>
    .container{
      width: 400px;
      height: 400px;
      border: 1px solid green;
    }
    .box1{
      width: 300px;;
      height: 100px;
      background: pink;
      float: left;
    }
    .box2{
      width: 110px;
      height: 100px;
      background: red;
      float: left;
      margin-left: -10px;
    }
  </style>
</body>
</html>

浮动使用场景

  1. 两栏布局
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .aside{
      width: 150px;
      height: 400px;
      background: red;
      float: left;
    }
    .main{
      margin-left: 160px;
      background: blue;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="aside">侧边栏固定宽度</div>
  <div class="main">内容区块自适应宽度</div>
</body>
</html>
  1. 三栏布局
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .aside{
      width: 150px;
      height: 400px;
      background: red;
      float: left;
    }
    .menu{
      width: 150px;
      height: 400px;
      background: yellow;
      float: right;
    }
    .main{
      margin-left: 160px;
      margin-right: 160px;
      background: blue;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="aside">左侧边栏固定宽度</div>
  <div class="menu">右侧边栏固定宽度</div>
  <div class="main">内容区块自适应宽度</div>
</body>
</html>

这里需要注意的是aside、main、menu放置的顺序，因为浮动元素是可以看见块级元素的，而块级元素占据一整行，所以浮动元素会换行，入下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .aside{
      width: 150px;
      height: 200px;
      background: red;
      float: left;
    }
    .menu{
      width: 150px;
      height: 200px;
      background: yellow;
      float: right;
    }
    .main{
      margin-left: 160px;
      margin-right: 160px;
      background: blue;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="aside">左侧边栏固定宽度</div>
  <div class="main">内容区块自适应宽度</div>
  <div class="menu">右侧边栏固定宽度</div>
</body>
</html>
  1. 左浮导航条
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .navbar{
      list-style: none;
    }
    .navbar>li{
      float: left;
      margin-left: 15px
    }
  </style>
</head>
<body>
  <ul class="navbar">
    <li><a href="#">产品1</a></li>
    <li><a href="#">产品2</a></li>
    <li><a href="#">产品3</a></li>
    <li><a href="#">产品4</a></li>
  </ul>
</body>
</html>
  1. 右浮导航栏
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .navbar{
      list-style: none;
    }
    .navbar>li{
      float: left;
      margin-left: 15px
    }
    .box{
      float: right;
    }
  </style>
</head>
<body>
  <div class="box">
    <ul class="navbar">
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
      <li><a href="#">产品3</a></li>
      <li><a href="#">产品4</a></li>
    </ul>   
  </div>
</body>
</html>

浮动的副作用

问题1:对后续元素位置产生影响

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .aside{
      width: 180px;
      height: 400px;
      background: red;
      float: left;
    }
    .menu{
      width: 180px;
      height: 400px;
      background: yellow;
      float: right;
    }
    .main{
      margin-left: 190px;
      margin-right: 190px;
      background: blue;
      height: 300px;
    }
    #footer{
      background: gray;
    }
    .content{
      background: pink;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="aside">左侧边栏固定宽度</div>
    <div class="menu">右侧边栏固定宽度</div>
    <div class="main">内容区块自适应宽度</div>
  </div>
  <div id="footer">我是footer，但是我的样式出现了问题</div>
</body>
</html

问题2:父容器高度计算出现问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .navbar{
      list-style: none;
      background:pink;
      border: 2px solid;
    }
    .navbar>li{
      float: left;
      margin-left: 15px
    }
  </style>
</head>
<body>
  <ul class="navbar">
    <li><a href="#">产品1</a></li>
    <li><a href="#">产品2</a></li>
    <li><a href="#">产品3</a></li>
    <li><a href="#">产品4</a></li>
  </ul>
</body>
</html>

父容器高度产生了塌陷

清理浮动

clear

!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
  
  <style>
    .box{
      width: 100px;
      height: 50px;
      border: 1px solid;
      float: left;
    }
    .box2{
      clear: left;
    }
  </style>

</body>
</html>

用clear撑开父容器

例1:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<ul class="navbar">
  <li><a href="#">1首页</a></li>
  <li><a href="#">2产品</a></li>
  <li><a href="#">3服务</a></li>
  <li><a href="#">4关于</a></li>
</ul>
<style>
    .navbar{
      list-style: none;
      border: 1px solid #ccc;
    }
    .navbar:after{
      content:'';
      display: block;
      clear: both;
    }
    .navbar>li{
      float: left;
      margin-left: 15px;
    }
      
    
</style>
</body>
</html>

例2:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="content">
    <div class="menu">侧边栏固定宽度</div>
    <div class="aside">侧边栏固定宽度</div>
    <div class="main">内容区块自适应宽度</div>    
  </div>
  <div id="footer">我是 footer，但我的样式好了</div>
  
  <style>
  .aside{
    width: 150px;
    height: 300px;
    background: red;
    float: right;
  }
  .menu{
    width: 150px;
    height: 300px;
    background: red;
    float: left;
  }
  .main{
    margin-right: 160px;
    margin-left: 160px;
    background: blue;
    height: 200px;
  }
  #content:after{
    content:'';
    display:block;
    clear: both;
  }
  #footer{
    background: grey;
  }

  
  </style>
</body>
</html>

例4:


屏幕快照 2018-12-05 下午2.23.13.png

当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

清除浮动方法

  1. 利用 clear属性，清除浮动
  2. 使父容器形成BFC

谨记：

  1. 如果用了浮动，其父元素一般(最好)需要清除浮动
.clearfix::after {
  content: ' ';
  clear: both;
  display: block;
}
  1. 水平布局时可以用inline-block或者浮动。用inline-block时要注意缝隙和对齐（vertical-align）；用浮动时要注意父容器塌陷，要把它撑开。
上一篇 下一篇

猜你喜欢

热点阅读