Tipps zum Löschen von Floats zwischen hierarchischen CSS-Elementen
如果让父元素包住浮动的子元素?主要有以下几种方法:
1:让父元素也一起浮动:经测试该方法可行,而且四周全部包住,非常严实.但是如果当前的子元素有多个父级的话,
那么每个父级元素都要设置浮动,甚至要一直写到
,所以该方法pass。2.给父元素设置溢出隐藏属性:同样也可实现要求,但这种方法有很多兼容性问题,大家课后可多打开几个浏览器测试
3.给当前的父元素中添加一个空的块元素,这个新元素只做一件事,清除它周围的浮动元素
经测试也能实现要求,这种方法是最简单最直观,而且没有任何兼容问题,但却有一个致命的问题,
那就是给当前的子元素列表中添加了一个无用的元素,当我们用js和php等脚本语言进行数据遍历的时候会非常麻烦
因为这个元素并不是我们需要的,必须单独的进行处理,那么有没有一种二全其美的方案:即保证兼容性,又不用添加新元素呢?
有,用我们之前学过的伪元素来解决。
4. 给父元素添加:after伪类,在后面添加一个空元素,直接设置它的属性即可;
<html>
<head>
<meta charset="UTF-8">
<title>7.层次元素之间的清除浮动的技巧</title>
<style type="text/css">
.parent {
background-color: lightskyblue;
border: 2px solid red;
/*让父元素一起浮动,让它包住浮动的子元素*/
/*float:left;*/
/*给父元素设置内容溢出隐藏功能*/
/*overflow: hidden;*/
}
.parent:after {
/*1.添加一个空元素*/
content: '';
/*2.默认为行内元素,所以要转为块元素*/
display: block;
/*3.直接清除二边的浮动*/
clear: both;
/*如果ie下显示有问题,可以加上*/
/*z-index: 1;*/
/*可能你看过有的地方是这样写的:*/
/*添加一个空格*/
/*content: '\0020';*/
/*然后让这个空格高度为0,这样就根本不会显示出来*/
/*height: 0;*/
}
.child {
width: 200px;
height: 200px;
background-color: lightgreen;
/*设置提示文本的水平垂直居中*/
text-align: center;
line-height: 200px;
/*当前父元素没有声明宽高,它是由子元素的宽高撑起来的*/
/*下面我们将子元素进行浮动,你将会看到非常有意思的事情发生*/
float:left;
/*结果你会发现,子元素浮动之后,脱离了文档流,它与原来的父级元素就没有了关联,
所以父级直接压缩了,无法再包住子元素*/
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div>
<div>子元素</div>
<!-- <div></div> -->
</div>
</body>
</html>Das obige ist der detaillierte Inhalt vonTipps zum Löschen von Floats zwischen hierarchischen CSS-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1383
52
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
