css 盒模型文檔流幾種清除浮動的方法

gitmilk 發(fā)布于2019-04-23 13:24 / 3648人閱讀

摘要：但是不會超出內邊距的范圍。漏加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏給了標準流的盒子。清除浮動清除浮動主要為了解決父級元素因為子級浮動引起內部高度為的問題。

盒模型

1、box-sizing: content-box 是普通的默認的一種盒子表現模式

    盒子大小為 width + padding + border ? content-box:此值為其默認值，其讓元素維持W3C的標準Box Mode

2、box-sizing:border-box 以盒子邊框為界 自己管理里面的元素

    border-box  盒子大小為 width ?  就是說  padding 和 border 是包含到width里面的

盒子陰影

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內(inset)/外陰影；

文檔流

普通流（標準流）

浮動

定位

浮動

浮動出現:解決文字環(huán)繞的效果

后來發(fā)現浮動可以做很多事

浮動會脫離標準流 不會占有原來的位置

浮動 是找的離他最近的父元素

浮動的對齊方式是頂部對齊

 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的范圍。

浮： ?  加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。

漏： ?  加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。

特： ?  特別注意，這是特殊的使用，有很多的不好處，使用要謹慎。

?清除浮動

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。

我們有時候不方便給父盒子高度 或者不知道父盒子的高度 這個時候就需要清除浮動

? ?

怎么去清除浮動?

    clear:both 同時清除左右兩側浮動的影響

1.給父盒子設置高度

*2.額外標簽法 : 添加一個額外的標簽  clear:both ? 起到分離上部分和下部分的作用

        影響了本身html結構

3.給父盒子一個display:table  但是有缺陷  建議 不要使用

*4.overflower:hidden  溢出隱藏

*5.

  .father:after {
        content: ".";/* 這里不建議大家使用"" */
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
      }

6. *zoom:1;處理ie6以下的版本兼容問題

*7.雙偽元素清除浮動

  .clearfix:before,.clearfix:after { 
          content:".";
          display:table;
        }
        .clearfix:after {
         clear:both;
        }
        .clearfix {
          *zoom:1;
        }

云服務器 GPU云服務器盒模型的清除方法清除浮動 js緩存的幾種方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/1831.html

CSS規(guī)范 > 8 盒模型 Box Model

摘要：當兩個及以上外邊距折疊，合并后的外邊距寬度是發(fā)生折疊的外邊距中的最大寬度。如果該元素的外邊距同其父元素的上外邊距折疊，則該盒的上邊框邊緣同其父元盒的上邊框邊緣相同。 2017-07-20: 關于外邊距折疊, 推薦問題: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

suemi 2019-08-28 18:14 評論0 收藏0
前端面試之CSS總結(上)

摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

?。琛?/span> 2019-08-29 11:18 評論0 收藏0
css魔幻屬性跟進篇

摘要：中是這樣定義的屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環(huán)繞它。其同樣適用于設置屬性為絕對定位或固定定位的內聯元素。至于為什么，可以理解為內聯元素沒有盒模型，其高度由內容決定。白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關的文章，文章絕大部分是自己工作總結得來，另一部分是平日sf回答的與面試中向面試官交流學到的，都是一...

oogh 2019-08-30 14:16 評論0 收藏0
前端整理——css部分

摘要：圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部浮動，但左右兩欄加上負讓其跟中間欄并排，以形成三欄布局。雙飛翼布局，為了中間內容不被遮擋，直接在中間內部創(chuàng)建子用于放置內容，在該子里用和為左右兩欄留出位置。（1）盒模型（普通盒模型、怪異盒模型） 1、元素的content（內容）、padding(內邊距)、border（邊框）、margin（外邊距）構成了CSS盒模型 2、IE...

chaosx110 2019-04-23 11:56 評論0 收藏0
CSS規(guī)范 > 9 視覺格式化模型 Visual Formatting Model

摘要：盒的類型會影響其在視覺格式化模型中的表現。浮動元素絕對定位元素根元素都被稱為脫離文檔流其他元素被稱為文檔流內。視覺格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻譯，譯者在原文基礎上...

魏憲會 2019-08-28 18:15 評論0 收藏0