首頁 > web前端 > html教學 > float学习笔记_html/css_WEB-ITnose

float学习笔记_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:28:49
原創
1114 人瀏覽過

float 系统学习

  • float的原本作用是产生文字环绕效果
  • float可以产生包裹、隔绝的效果( BFC)、破坏性

其他具有包裹性质的属性

display : inline-block table-cellposition: absolute/fixed/sticky???overflow: hidden/scroll
登入後複製

什么是破坏性

父元素的高度塌陷
登入後複製

其他具有破坏性的属性

display: noneposition: absolute/fixed/sticky
登入後複製

清除浮动(放在浮动元素的父元素上)

  • clear
  • bfc

clearfix的代码

.clearfix:after {    content: '';    display: block;    height: 0,    overflow: hidden;    clea    r: both;}.clearfix {     *zoom:1}/*兼容IE6、7*//****************方式二*******************/.clearfix:after {    content: '';    display: table;    clear: both;}.clearfix {    zoom:1;}
登入後複製

BFC

float: left/rightposition: absolute/fixedoverflow: hidden/scrolldisplay: inline-block/tabel-cellwidth/height/zoom:1(*IE6/IE7*)
登入後複製

浮动可以用来去除元素之间的空格

‘ ’;的空格可能会对布局造成影响因为‘‘‘ ’;当做普通文本来显示了

浮动与流体布局

???高端的

float

display: inline-block

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板