CSS浮动简介

作者: desperadokk | 来源:发表于2018-12-05 14:27 被阅读0次

CSS浮动简介
CSS浮动
CSS定位
一篇文章带你了解CSS clear both清除浮动
css定位
CSS 定位
CSS 定位 (Positioning)
Test10
CSS定位
CSS盒子模型、定位、浮动

浮动定义

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

正常情况

<!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>

红色左浮动，覆盖蓝色

<!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>

都向左浮动，父元素宽度为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>

如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住

<!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>

卡住了

<!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>

因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（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>

负边距
两个浮动元素，如果因放不下导致其中一个下移，对下移的元素设置负 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>

浮动使用场景

两栏布局

<!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>

三栏布局

<!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>

左浮导航条

<!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>

右浮导航栏

<!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

clear: left;
要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒的bottom外边下方
clear: right;
要求该盒的top border边位于源文档中在此之前的元素形成的所有右浮动盒的bottom外边下方
clear: both;
省略。。。

!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）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

清除浮动方法

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

谨记：

如果用了浮动，其父元素一般(最好)需要清除浮动

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

水平布局时可以用inline-block或者浮动。用inline-block时要注意缝隙和对齐（vertical-align）；用浮动时要注意父容器塌陷，要把它撑开。

CSS浮动简介
浮动定义一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果...
CSS浮动
简介其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。这篇讲CSS浮动,在CSS中浮动主...
CSS定位
简介其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。这篇讲CSS定位，如果说浮动的主要...
一篇文章带你了解CSS clear both清除浮动
一、前言 CSS clear both清除产生浮动，使用了css float浮动会产生css浮动，这个时候就需要...
css定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...
CSS 定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...
CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...
Test10
引用文章：那些年我们一起清除过的浮动 CSS浮动float详解 Clear Float CSS float浮动的...
CSS定位
CSS定位（Positioning）允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性...
CSS盒子模型、定位、浮动
CSS盒子模型概述 CSS内边距 CSS边框： CSS外边距 CSS定位： CSS浮动：