幸运蛋蛋pc开奖
本文通過圖文并茂的形式給大家介紹了CSS浮動與清除浮動的實例代碼,非常不錯,具有一定的參考借鑒價值,,需要的朋友可以參考下

 一、float(浮動)是什么

float 屬性定義元素在哪個方向浮動。

float:left 元素向左浮動。

float:right 元素向右浮動。

float:none 默認值。元素不浮動,并會顯示在其在文本中出現的位置。

float:inherit 規定應該從父元素繼承 float 屬性的值。

看一段簡單的代碼:
 

<div class="child1">左浮動</div>
<div class="child2">右浮動</div>
<div class="child3">喵</div>

  .child1 {
    float: left;
    height: 500px;
    width: 70%;
    background: #aa0;//黃
  }
  .child2 {
    float: right;
    height: 300px;
    width: 30%;
    background: #0aa;//青
  }
  .child3 {
    background: #a0a;//紫
  }

二、clear是什么

clear 屬性指定段落的左側或右側不允許浮動的元素。

clear:left 在左側不允許浮動元素。

clear:right 在右側不允許浮動元素。

clear:both 在左右兩側均不允許浮動元素。

clear:none 默認值。允許浮動元素出現在兩側。

clear:inherit 規定應該從父元素繼承 clear 屬性的值。

比如上面的例子,我們為 child3 加上 clear: both; ,便可清除浮動。(child3的左右兩側都不允許浮動元素,自然而然不會再跟在倆浮動元素的屁股后面了~)

 

那么,只在一側不允許浮動是怎樣的呢?

本來是醬紫的:
 

<div class="child1">child1右浮動</div>
<div class="child2">child2右浮動</div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...

  .child1 {
    float: right;
    background: #aa0;//黃
  }
  .child2 {
    float: right;
    background: #0aa;//青
  }

然后,為 child2 加上 clear: right; ,在child2的右側不允許浮動元素,所以child2就飄到了下一行。

那么,為 child1 加上 clear: left; 的時候,為什么不起效果呢?在這留個小彩蛋,歡迎大家留言討論~

三、浮動帶來的影響

浮動帶來的最大影響就是,當父元素只包含浮動的子元素的時候,父元素的高度就會塌陷( height 變為 0 )。

像醬紫:(parent高度為0,無法顯示粉色背景)
<div class="parent">
    <div class="child1">child1右浮動</div>
    <div class="child2">child2右浮動</div>
</div>
  .parent {
    background: #FBC;//粉
  }

四、清除浮動的方式
 

1. 在父元素中的結尾加一個空 div
 

div

<div class="parent">
  <div class="child1">child1右浮動</div>
  <div class="child2">child2右浮動</div>
  <div style="clear: both;"></div>
</div>

  .child1 {
    float: right;
    background: #aa0;
  }
  .child2 {
    float: right;
    background: #0aa;
  }

可見,空 div 高度為0,位于父盒子的最下面,使父盒子重新撐起了應有的高度。

為什么要在最后加?倘若你在中間加,效果會是醬紫:

 

由于空 div 的左右都不允許浮動元素,那么它就會另起一段,導致盒子位置的效果就像 child2 清除右側浮動一樣, child2 跑到了 child1 下方。

2. 在父元素設置 overflow 屬性
 

• 原理:設置 overflow:hidden 或 overflow:auto ,瀏覽器會自動檢查浮動區域高度(才能知道父框的內容有無溢出)
•優點:瀏覽器支持好
•缺點:子元素若超出父元素尺寸會被隱藏,或者父元素出現
 

<div class="parent" style="overflow:hidden;">
  <div class="child1">child1右浮動</div>
  <div class="child2" style="position:relative;top:10px;">child2右浮動</div>
</div>

 當設置 overflow:auto; 時,父元素會出現條:
 

3.偽元素
 

•原理:類似設置clear屬性
•優點:瀏覽器支持好,普遍
 

<div class="parent clearfix">
  <div class="child1">child1右浮動</div>
  <div class="child2">child2右浮動</div>
</div>
  .clearfix{
    zoom: 1;    //zoom(IE專有屬性)可解決ie6,ie7浮動問題
    display: block;
  }
  .clearfix:after {
    content: ".";    //content: "";也可
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }

總結

以上所述是小編給大家介紹的輕松搞懂CSS浮動與清除浮動,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!

最新資訊
中興通訊:本次非公開發行股票將于2020年2月3日上市

中興通訊:本次非公開

中興通訊發布公告稱,本次非公開發行股票將于2020年2月3
特斯拉市值超千億 馬斯克領取首份工資

特斯拉市值超千億 馬

特斯拉市值超過千億美元,也標志著特斯拉CEO馬斯克即將
華為開發者大會2020因疫情延期至3月:以直播呈現

華為開發者大會2020因

華為官方宣布,基于新型冠狀病毒感染的肺炎疫情防控形勢
韻達速遞:將對抵達武漢的快件和車輛進行消毒

韻達速遞:將對抵達武漢

韻達發布公告稱,將在武漢及寄達地處理中心對快件與車輛
餓了么:除了醫院及周邊,武漢其他區域照常配送

餓了么:除了醫院及周邊

餓了么發布公告稱,目前在武漢,除了醫院及周邊區域外,其他
京東:過去三天共售出口罩1.26億只

京東:過去三天共售出口

1月23日,京東發布消息,稱1月19日至22日期間,平臺口罩累計
最新文章
針對class、id所做的CSS HACK

針對class、id所做的C

這是一篇關于CSS HACK的文章,這篇文章中提到的CSS HACK
WEB標準教程:P標簽的應用

WEB標準教程:P標簽的

從今天開始,我將全面的共享出我所能理解的所有WEB標準
Web前端開發的Firefox插件

Web前端開發的Firefox

一、Web DeveloperWeb Developer 可說是網頁設計師最
詳解CSS粘性定位 sticky

詳解CSS粘性定位 stic

這篇文章主要介紹了CSS粘性定位 sticky 的相關知識,本
詳解css透明度之rgba和opacity的區別及兼容

詳解css透明度之rgba

對于設置透明度,我們有兩個可以選的css3屬性:rgba 和 op
輕松搞懂CSS浮動與清除浮動圖文詳解

輕松搞懂CSS浮動與清

本文通過圖文并茂的形式給大家介紹了CSS浮動與清除浮
幸运蛋蛋pc开奖 股票融资技巧_杨方配资平台 ok足球竞彩比分直播 两元彩票排列五走势图 登录北京时时彩 任选9场 星空棋牌舟山 2017147福彩开奖号码 篮球让分胜负刚好 云南时时彩 女性主播最赚钱的行业