Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > CSS清浮动_html/css_WEB-ITnose

CSS清浮动_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-24 11:24:56
Original
1023 Leute haben es durchsucht

前面的话

　　人们经常谈起清浮动，其实就是解决浮动元素的包含块高度塌陷的问题

 

定义

　　clear 清除

　　值: left | right | both | none | inherit

　　初始值: none

　　应用于: 块级元素

　　继承性: 无

left:左侧不允许存在浮动元素right:右侧不允许存在浮动元素both:左右两侧不允许存在浮动元素none:允许左右两侧存在浮动元素
Nach dem Login kopieren

　　[注意]设置clear属性的元素并不能改变浮动元素，而只能改变自身

　　CSS2.1引入了一个清除区域，清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围，这意味着元素设置clear属性时，它的外边距不改变

方法

　　对于标准浏览器来说，清浮动其实就两种方法，一种是在浮动元素下面添加新元素设置clear属性；另一种是触发包含块的BFC，使其包含浮动元素。而对于IE7-浏览器，则用到其特有属性haslayout

【1】clear属性

　　[1]

　　<注意>并不是很适用，若包含块为

    ，则子元素只能为
  • ，则在
  • 后面添加
    元素不合适

    　　[2]

    　　<注意>虽然clear属性只应用于块级元素，但在除IE7-以外的其他浏览器都可以将clear属性应用于
    元素

    　　[3]为浮动元素的after伪元素设置clear属性

    　　.clear:after{content:""; display: block; clear: both;}

    　　<注意>IE7-浏览器不支持after伪元素

    【2】BFC

    　　[1]float: left/right

    　　[2]position:absolute/fixed

    　　[3]display:inline-block/table-cell/table-caption/flex

    　　[4]overflow:hidden/scroll/auto

    　　关于BFC的详细信息移步至此

    【3】IE7-

    　　关于IE7-浏览器有一个其特有的属性haslayout，当触发包含块的haslayout时，浮动元素被layout元素自动包含

    　　[1]display:inline-block

    　　[2]height/width:除auto外

    　　[3]float: left/right

    　　[4]position: absolute

    　　[5]writing-mode: tb-rl

    　　[6]zoom: 除normal外

    　　关于haslayout的详细信息移步至此

    兼容

    　　在所有浏览器中都兼容的清浮动方案如下：

    .clear:after{content:""; display: block; clear: both;}.clear{zoom: 1;}
    Nach dem Login kopieren

     

Verwandte Etiketten：
CSS清浮动
Quelle：php.cn
Vorheriger Artikel：Sass 入门笔记_html/css_WEB-ITnose Nächster Artikel：JavaScript学习笔记： 数组(七)_html/css_WEB-ITnose
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Die Seite kann plötzlich weder CSS noch Bootstrap abrufen Ich entwickle also eine Seite, einen Teil davon habe ich gestern gemacht und es hat großar...
Aus 2024-04-06 21:58:04
0
1
800
Ändern Sie Inline-CSS-Stile in Javafx dynamisch Ich versuche, das Hintergrundbild eines Bereichs zu ändern, wenn die Anwendung maximiert i...
Aus 2024-04-06 20:57:16
0
1
487
Wie kann man schwebende Elemente in CSS vertikal statt horizontal stapeln lassen? Ich versuche, eine Webseite mit zwei Spalten zu erstellen, mit Hauptinhalt auf der einen S...
Aus 2024-04-06 20:45:26
0
2
386
Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...
Aus 2024-04-06 19:25:49
0
1
505
Ausgeblendete Seitenbereiche anzeigen: aktiviert Ich hätte gerne ein Navigationsmenü im Seitenbereich mit der Möglichkeit, über ein animier...
Aus 2024-04-06 15:49:33
0
1
319
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage