常用的清除浮動的方式

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

1、父級div定義偽類：after和zoom

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*清除浮動程式碼*/
   
  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
   .clearfloat{zoom:1}
</style> 
<div class="div1 clearfloat"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2">
   div2
</div>

2、在結尾處新增空div標籤clear:both

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*清除浮動程式碼*/
   .clearfloat{clear:both}
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
   div2
</div>

3、父級div定義height

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決程式碼*/height:200px;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2">
   div2
</div>

4、父級div定義overflow:hidden

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;overflow:hidden}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
</div>

5、父級div定義overflow:auto

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;overflow:auto}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
</div>

6、父級div也一起浮動

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;margin-bottom:10px;float:left}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解決程式碼*/clear:both}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
</div>

7、父級div定義display:table

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解決程式碼*/width:98%;display:table;margin-bottom:10px;}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
</div>

8、結尾處加br標籤clear:both

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
   .div2{background:#800080;border:1px solid red;height:100px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   .clearfloat{clear:both}
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
   div2
</div>

常用清除浮動方式與瀏覽器相容

1、父級div定義height 此種方法只適合固定height的使用，不存在瀏覽器相容問題。 2、：after/:before（推薦） .clearfix:after{ content:"

常用的清除浮動的方式

1、父級div定義偽類：after和zoom <style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;bord

清除浮動的方式以及各自的優劣

兩個基礎上為什麽不能 isp 問題 osi 固定 eight 為什麽要清除浮動浮動會使當前標簽產生向上浮的效果，導致不同瀏覽器在計算父級元素高度，或者顯示前後標簽位置的時候產生意想不到的問題。清除浮動的方法為父元素定義height 設置父元素浮動，同時為

清除浮動的幾種方式

spa 絕對定位 :after play hid pre div pos absolute 解決辦法: 　　1.添加額外標簽 <div style="clear:both;"></div> 　　2.父級添加偽類 .box1:after{

ZXJL——清除浮動負面效果的三種方式

清除 overflow splay 定義 over ont 瀏覽器所有方式一、添加空盒子（較流行）缺點：為清除浮動，添加的空盒子太多，新手容易暈。方法：在浮動元素的後面（同級元素）添加一個新的div，並定義一個clear類，附給該div。 .

清除浮動的幾種常用方法

src 添加環繞 blog img eight 方式內聯元素特性首先，浮動這個樣式的出現，僅僅只是為了實現圖文環繞的效果，現在大多時利用浮動來布局；浮動：　　使元素推理文檔流，按照指定方向發生移動；　　遇到父級邊界或者相鄰的浮動元素會停下來；浮動的特性：　

html 清除浮動的幾種方式

pos con 獲取手動 splay 屬性 rfi 添加瀏覽器清除浮動的幾種方式？答：1，父級 div 定義 height 原理：父級 div 手動定義height，就解決了父級 div 無法自動獲取到高度的問題。簡單、代碼少、容易掌握，但只適合高度固定的布局

清除浮動的通用方式

hidden overflow 清除 display text alt bili span spa 1 <div class="news clearfix"> 2 <img src="/img/news-pic.jpg" alt="my pic"

清除浮動的幾種方式和兼容性處理

不容易初學 str strong ott tex right pos 文檔流清除浮動的幾種方式和兼容性處理在清除浮動前我們要了解兩個重要的定義：浮動的定義：使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。高度塌陷：浮動元素父元素高度

常用的清除浮動做法

before fix display hid oom splay hidden bsp 方式 1.給父元素加overflow:hidden 好處: 簡單, 缺點:超出的尺寸的會被隱藏, 建議使用2, 3的方式 2.給父元素添加類clearfix, 內容如下

前端學習筆記day03 清除浮動的四種方式

1. 清除浮動主要是為了解決父級元素因為子級元素設定浮動內部高度為0的情況（父級元素不方便設定height高度） <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

清除浮動的方式

1. 給父級定義height .parent { background-color: red; } .float-left { width: 200px; height: 200px; float: left; } <div class="pa

清除浮動最常用的兩種方法

第一種方法： .clearfix:after { content:" "; display: block; clear:both; } 註釋： :after 選定的位置，輸入需要的內容； content:"

脫離文件流的三種方式以及清除浮動

固定定位(position:fixed) 脫離文件流後的元素有四個特性： 1.不再區分行和快； 2.如果本元素未設定寬度，脫離後的寬度將由其子元素撐開，高度也是； 3.字圍效果； 4.貼靠現象；清除浮動： 1.給浮動元素的父元素設定寬高，這樣就不會影響到後面的元素了（不建議用，不使用）； 2.給浮動元素新

面試題：清除浮動的三種方式及其原理

清除浮動的三種方式及其原理浮動元素的特性浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。浮動元素帶來的問題因為浮動元素脫離文件流，所以對於其處於正常文件流中父元素，無法獲知其高度，導致父元素自身的高度塌陷（失去浮動元素佔據

清除浮動常用的一種方法

用偽類清除浮動是目前比較常用的一種方法 .clearFloat:after{ content:"."; clear:both; display:block;

css清除浮動產生影響的三種方式

清除浮動：清除浮動不是不會浮動，只是消除浮動產生的不利影響當父盒子沒有定義高度，巢狀在父盒子內部的子盒子發生浮動後，父盒子下邊的元素位置發生錯誤，即父盒子中的子元素脫標 1、額外標籤法 <div class="con fixclear"> <

01-CSS基礎--CSS概述+CSS和HTML相結合的四種方式+CSS選擇器+盒子模型+元素的浮動float+清除浮動clear+元素的定位position

一、CSS概述 1、CSS：層疊樣式表，用來定義網頁的顯示效果。CSS將網頁內容和顯示樣式進行分離，提高了顯示功能（降低耦合性，提高擴充套件性和可維護性） 2、CSS的基本特徵（1）層疊性：多種CSS樣式的疊加（2）繼承性：子標記會繼承父標記的某些樣式 3、CS

請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式？

為什麼出現浮動？浮動float最開始出現的意義是為了讓文字環繞圖片而已，但人們發現，如果想要三個塊級元素並排顯示，都給它們加個float來得會比較方便。什麼時候清除浮動？如果想要實現三個塊級元素並排顯示，期望效果如下圖所示：給三個塊級元素

清除浮動的最常用的四種方法，以及優缺點

為什麼要清除浮動？清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題 1.如下，我給父盒子設定一個boder，內部放兩個盒子一個big 一個small，未給big和small設定浮動，則他們會預設撐開父盒子 2.當我給內部兩個盒子加上float

常用的清除浮動的方式

相關推薦