css同级元素之间的清除浮动的技巧
Jun 29, 2018 am 09:21 AM清除左浮动:该元素的左边不允许出现浮动元素而当前它的左边有浮动元素,而自己本身又是块元素,只能掉到下一行首开始显示
clear: left;
清除右浮动:与上面相同,不允许元素的右边出现浮动元素,同样它只能在右浮动元素下面另起一行显示,当然,它也只能沿着右浮动的最下面的底边为起始点,开始显示
clear: right;
如果该元素的左右二边都禁止出现浮动元素,可以使用以下简写
clear:both;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6.同级元素之间的清除浮动的技巧</title>
<style type="text/css">
.box1 {
width:200px;
height: 200px;
background-color: lightskyblue;
/*设置左浮动*/
float:left;
}
.box2 {
width:250px;
height: 250px;
background-color: lightgreen;
/*设置右浮动*/
float:right;
}
.box3 {
width:300px;
height: 300px;
background-color: lightcoral; /*珊瑚色*/
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>Salin selepas log masuk
Atas ialah kandungan terperinci css同级元素之间的清除浮动的技巧. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
Alat panas Tag
Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apakah maksud pemegang tempat dalam vue
May 07, 2024 am 09:57 AM
Apakah maksud pemegang tempat dalam vue
Bagaimana untuk menulis ruang dalam vue
Apr 30, 2024 am 05:42 AM
Bagaimana untuk menulis ruang dalam vue
Bagaimana untuk mendapatkan dom dalam vue
Apr 30, 2024 am 05:36 AM
Bagaimana untuk mendapatkan dom dalam vue
Bagaimana untuk memperkenalkan imej ke dalam vue
May 02, 2024 pm 10:48 PM
Bagaimana untuk memperkenalkan imej ke dalam vue
Bagaimana untuk membungkus prompt dalam js
May 01, 2024 am 06:24 AM
Bagaimana untuk membungkus prompt dalam js
