Heim >Web-Frontend >CSS-Tutorial >Clear Floating & Overflow
Clear Floating & Overflow
- Susan SarandonOriginal
- 2024-11-06 15:58:02381Durchsuche
Sie finden den gesamten Code in diesem Beitrag im Repo Github.
Sie können das Bild hier überprüfen:
- Floating löschen – CodeSandbox
- Überlauf – CodeSandbox
Klares Schweben
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Clear Float</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<pre class="brush:php;toolbar:false">.box {
float: left;
width: 100px;
height: 100px;
margin: 10px;
background-color: lightgreen;
}
.container {
border: 2px solid black;
padding: 10px;
}
.clearfix::after {
content: " ";
display: block;
height: 0; /* optional */
visibility: hidden; /* optional */
clear: both;
}
Überlauf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Overflow</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p>
<pre class="brush:php;toolbar:false">.one-line-overflow {
width: 40px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.multiple-lines-overflow {
width: 40px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
Das obige ist der detaillierte Inhalt vonClear Floating & Overflow. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
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
Vorheriger Artikel：Flexbox beherrschen: Meine Studiennotizen zum Erstellen responsiver LayoutsNächster Artikel：Flexbox beherrschen: Meine Studiennotizen zum Erstellen responsiver Layouts