2. 程式人生 > >CSS-標準流，浮動

CSS-標準流，浮動

阿新 • • 發佈：2018-12-09
標準流
  標準流：預設狀態，元素在排版佈局中採用從左往右，從上向下的排列方式。最終效果為窗體自上向下分佈為多行元素，且每行從左向右分佈的元素。
  在此基礎上產生了塊級元素和行內元素。在此補充可以採用屬性display:inline的樣式來將塊內元素併為行內，使用display:block來將行內元素變為塊內。具體可見[牛腩新聞釋出系統-CSS](https://blog.csdn.net/TheBestAge/article/details/84672721)
  因為標準流的限制導致元素按照從左向右排列，且不能修改寬和高，所以產生了脫離標準流即浮動，定位和轉換。
浮動
  在標準流裡，元素並排排列且不能設定寬度和高度。而浮動可以擺脫這種現象。
  浮動的框可以向左或向右移動，直到它的外邊緣接觸到另一個的邊框為止。 我們用示意圖來解釋這個過程：

                       在這裡插入圖片描述

                       在這裡插入圖片描述

                       在這裡插入圖片描述

情況二：框1向左浮動，即脫離文件流，不佔據空間，導致效果出現框1覆蓋框2的現象。
                       在這裡插入圖片描述

情況三：
                       在這裡插入圖片描述

                           在這裡插入圖片描述

參考資料：CSS 浮動

相關推薦

CSS-標準流，浮動

標準流   標準流：預設狀態，元素在排版佈局中採用從左往右，從上向下的排列方式。最終效果為窗體自上向下分佈為多行元素，且每行從左向右分佈的元素。   在此基礎上產生了塊級元素和行內元素。在此補充可以採用屬性display:inline的樣式來

css---標準流、盒模型、浮動

一、盒模型 1.1 盒子的區域 一個盒子的主要屬性5個：width、height、padding、border、margin padding：內邊距 border：邊框 margin：外邊框 1.2 認識width、height 一個盒子的真實佔有的寬度：左bo

java第21天----轉換流，標準流，列印流，序列化流，Properties類

昨天知識總結 1.字元緩衝流 2.裝飾設計模式 3.介面卡設計模式 4.位元組流 5.位元組緩衝流 6.標準輸入流 流 轉換流 轉換流：本身是字元流 分類： InputStreamReader：從位元組輸入流到字元讀入流 OutputStreamWrit

css浮動布局，浮動原理，清除(閉合)浮動方法

alt 容器 images 進行 type -s ext 浮動框 形象 css浮動 1.什麽是浮動：在我們布局的時用到的一種技術，能夠方便我們進行布局，通過讓元素浮動，我們可以使元素在水平上左右移動，再通過margin屬性調整位置 2.浮動的原理：使當前元素脫離普通流，相當

css基礎 float 標準流的div 遇到 float的div

pre 視頻 ast gpo rst chrome first set itl 禮悟：　　 公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。 虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。 　　

Java學習總結（二十四）——前端：CSS樣式設計（CSS引入，選擇器，盒子模型，浮動元素）

引入 itl AI dropdown 正常的 type ID 總結 網頁 一．CSS引入方式1.CSS簡介：（1）CSS(Cascading style Sheets):層疊樣式表。用來給html網頁設置樣式;（2）當多個選擇器對同一個元素進行樣式設計時，則該元素的樣式為多

IO_標準步驟，位元組流

 IO流操作的基標準步驟：           1:檔案位元組輸入流 （將檔案內容輸入到程式中） public static void main(String[] args) { //1，建立源 File src

嵌入式Linux標準IO，獲取檔案大小fgetc()，定位流獲取檔案大小fteel()、rewind()/fseek()，處理錯誤資訊perror()/strerror()

#include <stdio.h> #include <errno.h> #include <string.h> int get_file_size(const char *file); int main(int argc, const char *a

【css】子元素浮動到了父元素外，父元素沒有隨子元素自適應高度，如何解決？

正常情況 如果子元素沒有設定浮動（float），父元素的高度會隨著子元素高度的改變而改變的。 設定浮動以後 父元素的高度不會隨著子元素的高度而變化。 例如：在一個ul中定義若干個li，並設定float='left' <!DOCTYPE html> <html lang="en"&g

java第20天----字元緩衝流，位元組流，標準輸入流，裝飾設計模式，介面卡設計模式

昨天知識總結 1.流的基礎 2.流的分類 3.字元流 讀 FileReader 寫 FileWriter 4.File 流 字元緩衝流 字元緩衝流:又叫字元緩衝區，為了提高讀寫的能力，本身沒有讀寫的能力，要想進行讀寫，必須依靠字元流來實現。

css中的流，元素，基本尺寸

流 元素 基本尺寸 流之所以影響整個css世界，是因為它影響了css世界的基石 --HTML HTML 常見的標籤有雖然標籤種類繁多，但通常我們就把它們分為兩類： 塊級元素（block-level element）和內聯元素（inline element）。 1.塊級元素 1.1 概念相關 “塊級元素”對

CSS，浮動及其影響

浮動(float)： 　　讓預設文件流(標準文件流)下的元素漂浮起來，水平排列。 　　通俗點來說，浮動可以讓元素浮到第二層，而其他沒有浮動的元素就往上排，而我們是俯視去看的，所以往上頂的那個元素就會被遮住，這就帶來了問題。解決方法，後面會有說。 　　float: 1. left----左浮 　　　　&

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

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

vector，string，標準輸入輸出流，檔案輸入輸出流01(C++)

按要求編寫程式。 a) 定義一個結構體型別 Student，如下所示： struct Student { int ID; //學號 string name; //姓名 float score[3]; //三門課程成績 }; b) 編寫一個函式，按照上述結構體定義，依次從鍵盤輸

html非標準文件流（浮動）整理。

一、為什麼需要浮動？ 塊級元素不能與任何元素標籤在同一行，行級元素雖然可以和行級元素在同一行，但是無法調整元素的寬高！ 所以標準的文件流限制太多，非常生硬，不夠靈活。 為了讓行內元素有並排的效果，也要能設定寬高，所以就需要浮動。 二、關於浮動的性質。 浮動的元素會脫離標準的文件流!！這個很重

標準輸入輸出流，string 亦可使用01(C++)

從鍵盤輸入一個不包括空格的僅由英文字母組成的字串，長度不超過 200 個字元。統計 26 個英文字母的使用頻率（出現的 次數），不區分大小寫。最後按使用頻率從大到小的順序輸出字母（小寫字母）及其使用頻率，沒有出現的字母不輸出   /*==================

緩衝流，轉換流，標準輸入輸出流

宣告：由於學習所用環境為JDK1.8，所有java程式碼均在JDK1.8環境中測試通過，如果環境發生變化，可能會有錯誤發生！一.緩衝流緩衝流是處理流的一種,建立在相應的節點流之上，對讀寫的資料提供了緩衝的功能，提高了讀寫的效率，還增加了一些新的方法JDK提供四種緩衝流Buff

CSS標準文件流

標準文件流 說白了就是一個“預設”狀態。文件流指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素。 標準流的微觀現象： (1).空白摺疊現象。比如，如果我們想讓img標籤之間

C++提高 10（標準輸入，輸出流，檔案io流）

1.標準輸入流 #include<iostream> using namespace std; void main01() { int a; long b; char c[100]

CSS網頁佈局方式--浮動流、定位流

網頁佈局方式定義： 網頁的佈局方式就是瀏覽器如何對網頁中的元素進行排版 主要分三種 標準流 浮動流 定位流 標準流（文件流/普通流）排版 定義：瀏覽器預設的排版方式 在css