float浮動

時間 2019-11-16

標籤 float 浮動欄目 CSS 简体版

原文原文鏈接

普通流（標準流）：默認狀態，元素自動從左往右，從上往下的排列。javascript

塊元素css

行內元素html

CSS Float（浮動）的基礎知識（元素浮動後具有inline-block（行內塊元素）屬性）java

1.會使元素向左或向右移動，只能左右，不能上下。後端

2.浮動元素碰到包含框或另外一個浮動框，浮動中止。框架

3.浮動元素以後的元素將圍繞它，以前的不受影響。前後端分離

4.浮動元素會脫離標準流。ide

沒有設置任何浮動的時候效果以下：測試

給圖片設置向左浮動，.container img{ float:left; }，效果以下ui

解釋：float的初衷就是爲了實現文字的環繞效果，這裏給圖片設置了一個左浮動，即實現了文字環繞在圖片的周圍，由於再給元素加了浮動以後，它會從文檔流中脫離出來，這裏也即加了浮動的這張圖片會從容器中脫離出來，因此下邊的文字就會往上走。但爲何文字和圖片沒有產生重疊的效果呢？是由於給元素加了浮動以後，雖然會脫離文檔流，但仍處在文本流中，也就是說它依然會佔據文本空間的，因此它會把文字往旁邊擠，因此就產生了文字環繞圖片的效果。浮動元素會影響以後的內容，他以前的內容是不會受到影響的，這裏若是在圖片以前加上一段文字，那麼那段文字是不會受到圖片浮動效果的影響的。

給圖片設置向右浮動，.container img{ float:right; }，效果以下

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text_around</title>
	<style type="text/css">
	.container{
		width:800px;
		height:600px;
		border:2px solid #333;
	}
	.container img{
		float:left;
	}
	</style>
</head>
<body>
	<div class="container">
		<img src="./img/1.jpg">
		<div class="clear"></div>
		<p>前言 目前Mock技術已經比較成熟，在平常的工做中Mock也能夠給咱們帶來很大的遍歷，本篇文章將會使用Moco框架，一步一步搭建一套Mock Server，使得接口的自動化測試更加的提早，也可以使得先後端分離。 共識與痛點 目前，在軟件行業內，你們已經達成的共識就是，測試的工做應該從需求階段就開始，但在實際工做落地的時候，咱們也僅僅可以根據需求寫一些測試用例。 在開發測試代碼的過程當中，調試就面臨着...前言 目前Mock技術已經比較成熟，在平常的工做中Mock也能夠給咱們帶來很大的遍歷，本篇文章將會使用Moco框架，一步一步搭建一套Mock Server，使得接口的自動化測試更加的提早，也可以使得先後端分離。 共識與痛點 目前，在軟件行業內，你們已經達成的共識就是，測試的工做應該從需求階段就開始，但在實際工做落地的時候，咱們也僅僅可以根據需求寫一些測試用例。 在開發測試代碼的過程當中，調試就面臨着...前言 目前Mock技術已經比較成熟，在平常的工做中Mock也能夠給咱們帶來很大的遍歷，本篇文章將會使用Moco框架，一步一步搭建一套Mock Server，使得接口的自動化測試更加的提早，也可以使得先後端分離。 </p>
	</div>
</body>
</html>

清除浮動經常使用方法：

1.在浮動元素後使用一個空元素

例如：<div class="clear"></div>

.clear{clear:both;}

2.給浮動元素的容器添加overflow:hidden;（這裏的容器不包括浮動元素後面的元素，即設置浮動的元素包裹在一個單獨的容器中）

3.使用CSS3的:after僞元素（主流方法）

.clearfix:after{

　　content:"";

　　display:block;

　　height:0;

　　visibility:hidden;

　　clear:both;

}

如下是三種清除浮動的方法的具體代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text_around</title>
	<style type="text/css">
	.container{
		width:800px;
		height:600px;
		border:2px solid #333;
	}
	.container img{
		float:left;
	}
	/* 第三種方法（和第二種方法同樣，浮動元素單獨包裹在一個容器中） */
	.clearfix:after {
		content: '.';
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
	/* 
	第二種方法
	.imgcon {
		overflow: hidden;
	} */
	
	/* 
	第一種方法 
	.clear {
		clear:both;   
	} */
	</style>
</head>
<body>
	<div class="container">
		<div class="imgcon clearfix">
			<img src="./img/1.jpg">
			<div class="clear"></div>
		</div>
		<p>前言 目前Mock技術已經比較成熟，在平常的工做中Mock也能夠給咱們帶來很大的遍歷，本篇文章將會使用Moco框架，一步一步搭建一套Mock Server，使得接口的自動化測試更加的提早，也可以使得先後端分離。 共識與痛點 目前，在軟件行業內，你們已經達成的共識就是，測試的工做應該從需求階段就開始，但在實際工做落地的時候，咱們也僅僅可以根據需求寫一些測試用例。 在開發測試代碼的過程當中，調試就面臨着...前言 目前Mock技術已經比較成熟，在平常的工做中Mock也能夠給咱們帶來很大的遍歷，本篇文章將會使用Moco框架，一步一步搭建一套Mock Server，使得接口的自動化測試更加的提早，也可以使得先後端分離。 共識與痛點 目前，在軟件行業內，你們已經達成的共識就是，測試的工做應該從需求階段就開始，但在實際工做落地的時候，咱們也僅僅可以根據需求寫一些測試用例。 在開發測試代碼的過程當中，調試就面臨着...前言 目前Mock技術已經比較成熟，在平常的工做中Mock也能夠給咱們帶來很大的遍歷，本篇文章將會使用Moco框架，一步一步搭建一套Mock Server，使得接口的自動化測試更加的提早，也可以使得先後端分離。 </p>
	</div>
</body>
</html>

下面給出一段代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>float</title>
	<style type="text/css">
	.container{
		width:500px;
		height:500px;
		border:2px solid #333;
	}
	.box01{
		width:100px;
		height:100px;
		background:blue;
		color:#fff;
		float:left;
	}
	.box02{
		width:100px;
		height:100px;
		background:red;
		color:#fff;
	}
	.box03{
		width:100px;
		height:100px;
		background:orange;
		color:#fff;
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="box01">11111</div>
		<div class="box02">22222</div>
		<div class="box03">33333</div>
	</div>
</body>
</html>

最初效果以下：

給box01添加左浮動，則

給box01和box02添加左浮動，則

給box0一、box0二、box03添加左浮動，則

這裏想了一下，爲何文字能夠環繞圖片，而只給box01設置左浮動的時候，它卻遮蓋了box02呢，個人理解是文字是位於文本流的，雖然圖片盒子也會位於文本流，可是它是脫離了文檔流的，至關於它原先所在的空間和位置都沒有了，這也是爲何只給box01添加左浮動時，第二個元素看不到的緣由，由於它浮動到上面去了，被box01遮擋住了，因此他在顯示的時候是會按照文檔流來的。

完整的一個示例：

代碼部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      width: 1200px;
      margin: 0 auto;
    }
    .header {
      width: 1200px;
      background: aquamarine;
      overflow: hidden;
    }
    .logo {
      float: left;
      height: 80px;
    }
    .nav {
      float: right;
    }
    ul li {
      list-style: none;
      float: left;
      height: 80px;
      line-height: 80px;
      margin-right: 10px;
    }
    a {
      text-decoration: none;
    }
    .con {
      width: 1000px;
      height: 400px;
      float: left;
      background: bisque 
    }
    .side {
      width: 200px;
      height: 400px;
      float: right;
      background: blueviolet
    }
    .clearfix:after {
      content: '.';
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }
    /* .main {
      overflow: hidden;
    } */
    .footer {
      width: 1200px;
      height: 100px;
      background: cadetblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="logo">
        <img src="./img/logo.png">
      </div>
      <ul class="nav">
        <li><a href="#">免費課程</a></li>
        <li><a href="#">職業路徑</a></li>
        <li><a href="#">實戰</a></li>
        <li><a href="#">猿問</a></li>
        <li><a href="#">手記</a></li>
      </ul>
    </div>
    <div class="main clearfix">
      <div class="con">content</div>
      <div class="side">sidebar</div>
    </div>
    <div class="footer">footer</div>
  </div>
  
</body>
</html>

　網頁效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。