html5-css:關於float,position的定位問題，文件流的解析

阿新 • • 發佈：2019-01-17

自己總結，全作參考，請以權威文件為準；

以下是一段程式碼，該程式碼中的四個DIV並沒有做任何 float 或 position 的 css 屬性設定；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 250px;
				padding-top: 50px;
				padding-bottom: 50px;
				text-align: center;
			}
			div:nth-child(1){
				margin-left: 0px;
				background-color: cyan;
			}
			div:nth-child(2){
				margin-left: 200px;
				background-color: chartreuse;
			}
			div:nth-child(3){
				margin-left: 400px;
				background-color: crimson;
			}
			div:nth-child(4){
				margin-left: 600px;
				background-color: orange;
			}
		</style>
	</head>
	
	<body>
		<div>this is an ordinary div</div>
		<div>this is an ordinary div</div>
		<div>this is an ordinary div</div>
		<div>this is an ordinary div</div>
	</body>
</html>

顯示結果如下：

接下來，對紅色方塊設定float屬性：float=right;

將上例style替換為：

<style type="text/css">
			div{
				width: 250px;
				padding-top: 50px;
				padding-bottom: 50px;
				text-align: center;
			}
			div:nth-child(1){
				margin-left: 0px;
				background-color: cyan;
			}
			div:nth-child(2){
				margin-left: 200px;
				background-color: chartreuse;
			}
			div:nth-child(3){
				margin-left: 400px;
				float: right;
				background-color: crimson;
			}
			div:nth-child(4){
				margin-left: 600px;
				background-color: orange;
			}
		</style>

顯示結果如下：

可見紅色方塊在向右浮動，且是基於其原本的位置向右浮動。紅色方塊的div之後的div塊（這裡的測試中的橙色塊）的定位無視它前面的浮動塊。但其中的文字卻受到紅色浮動塊的margin-top屬性的影響，當我們去掉紅色塊的margin-top屬性後，顯示如下：

可見去掉紅色塊的margin-top的屬性後，它後面的橙色塊中的文字恢復正常。

html5-css:關於float,position的定位問題，文件流的解析

自己總結，全作參考，請以權威文件為準；以下是一段程式碼，該程式碼中的四個DIV並沒有做任何 float 或 position 的 css 屬性設定；<!DOCTYPE html> <

css中絕對定位和相對定位，文檔流的理解

css 定位相關鏈接：http://blog.csdn.net/libertea/article/details/11662661 今天在這裏看到了關於一個定位的博客，感覺講的挺好的，在這裏分享一下鏈接。css中絕對定位和相對定位，文檔流的理解

css的定位與文件流

談到CSS的定位機制時都會提到一個關鍵詞“文件流”。那麼什麼是文件流呢？將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為[size=x-large]文件流[/size]。 CSS的定位機制有3種：[color=blue]普通流、浮動（float

CSS佈局之脫離文件流詳解——浮動、絕對定位脫離文件流的區別

所謂脫離文件流，即將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當沒看到它，兩者位置重疊都是可以的。這裡，通過講解浮動脫離文件流（float）和絕對定位脫離文件流（position:absolute）的區別，讓大家對這一概念有更深的認識。一、浮動

浮動、絕對定位脫離文件流的區別

所謂脫離文件流，即將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當沒看到它，兩者位置重疊都是可以的。這裡，通過講解浮動脫離文件流（float）和絕對定位脫離文件流（position:absolute）的區別，讓大家對這一概念有更深的認識。一、浮動脫離文件流使用floa

css的文件流,float浮動和position定位

因為最近不少的學弟學妹問我css佈局的問題，我就將大家的疑惑點大概總結了一下，把你們一些比較疑惑的知識給你們講一下。 1.文件流因為定位經常就涉及到一個詞脫離文件流,可能之前不瞭解文件流，我就詳細的講解一下：因為css的定位機制有三種，普通流，fl

css中position 定位的兼容性，以及定位的使用及層級的應用

技術 number 窗口 fix padding 就會 border 代碼兼容一、首先我們來看看定位的兼容性，當然是在IE6、7但是現在大多數公司都已經不考慮了我們就作為一個了解吧： 1、在IE67下,子元素有相對定位的話,父級的overflow:hidden包不住子

CSS - 文件流 and 佈局（浮動、流式、定位、相對、絕對、固定）

目錄一、文件流（normal flow） 1、概念 2、BFC（Block formatting context 塊格式化上下文） - 2.1一切皆為框 - 2.2 無名塊框 3、BFC規則二、浮動佈局 1

css float浮動樣式&文件流

1.什麼是文件流一個html檔案就是一個文件流。所有元素預設都處於文件流中在文件流中塊元素獨佔一行，可以設定內容區大小（width，height）當wdith設定為auto自動時，他將佔據整個父元素的寬度。當將h

CSS之定位與脫離文件流與過渡

CSS介紹實現移動的三種方法可以用margin 可以用浮動佈局可以用定位脫離文件流 <!DOCTYPE html> <html lang="en">

[CSS]CSS浮動float詳解（一）：標準文件流

Web網頁的製作，是一個流，必須自上而下依次進行。標準文件流流的比喻很形象，就像水流一樣，必須從上而下，像織毛衣一樣。那麼究竟什麼是標準文件流呢？在web中，標準文件流有以下幾個特點：高矮不齊，底邊對齊自動換行無論字型大小有多高，

五.目錄，文件的瀏覽，管理和維護

linux文件系統維護結構 mkdir 硬件配置文件查看路徑目錄一.linux文件系統的層次結構： a)在linux中，所有的文件和目錄都被組織成一個由一個根結點的樹狀結構，如 mkdir -p /a/b/c/d ,用tree 命令查看能直觀顯示目錄的結構為樹

linux之系統編碼，python編碼，文件編碼

python 編碼文件編碼 linux編碼 1 前言如果你對python2和python3的中編解碼很清楚，這裏我認為你很清楚。具體參考文檔：“python2 encode和decode函數說明.docx”“字符編碼——從ASCII開始.docx”以上所有文檔均為本地文檔。2

python第三節函數，文件操作

python函數文件處理文件操作#以讀的方式打開文件# f=open(‘c.txt‘,encoding=‘utf-8‘)# print(f)# data = f.read() #以讀的方式打開# print(data)# print(f.closed) #判斷文件是否是關閉狀態# print(f.

Python自動化開發課堂筆記【Day03】 - Python基礎(字符編碼使用，文件處理，函數)

賦值創建解釋器使用重復 closed 操作邏輯默認字符編碼使用 1. 文本編輯器如何存取文件文本編輯器相當一個運行在內存中的進程，所以文件內容在編輯未存儲時都是在內存中的，尚未存儲在硬盤之中，在沒有保存之前，所編輯的任何文本都只是一堆字符，沒有任何邏輯上的意

將HTML5封裝成android應用APK文件的幾種方法

android作為下一代的網頁語言，HTML5擁有很多讓人期待已久的新特性。HTML5的優勢之一在於能夠實現跨平臺遊戲編碼移植，現在已經有很多公司在移動設備上使用HTML5技術。隨著HTML5跨平臺支持的不斷增強和智能手機的迅速普，HTML5技術有著非常好的發展前景，甚至有人預言HTML5將引燃移動平臺遊

CSS中position定位

fix rip ble 偏移正常 abs css class z-index 定義和用法 position 屬性規定元素的定位類型。說明這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麽類型。相對定位

go語言使用go-sciter創建桌面應用(七) view對象常用方法，文件選擇，窗口彈出，請求

問題 adf img function jquery stdout view type 改變 view對象的詳細文檔請看： https://sciter.com/docs/content/sciter/View.htm demo9.html代碼如下： &l

day31 類的組合及繼承，文件目錄規範

rop false 飛機 true img mod 之路 put ... Python之路，Day18 = Python基礎18-面向對象繼承與組合類的繼承 1 def talk(): 2 print("I am come from talk..a")

css float position 筆記

css float positionfloat: right; 只對後面的元素起作用，圍繞在後面元素的右邊clear: rigth; 如果後面的元素有這句，意思是說我的右邊不要有人圍繞class="clearfix" border自適應元素的高度，起到 overflow 的作用position: s

html5-css:關於float,position的定位問題，文件流的解析

相關推薦