Rumah hujung hadapan web html tutorial 辛星彻底帮您解决CSS中的浮动问题_html/css_WEB-ITnose

辛星彻底帮您解决CSS中的浮动问题_html/css_WEB-ITnose

Jun 24, 2016 pm 12:01 PM
css terapung selesaikan

     浮动,是CSS布局中必须经过的一道坎,如果不熟悉浮动,那么CSS的布局就如同空中楼阁,而谈到浮动,更多的是和div相结合,div是一个块级元素,这个我前面的博文有介绍,如果大家喜欢我的风格,可以搜索下。

     下面我们进入正题,所谓浮动,可以用css的属性float来定义,比如float:left就是向左浮动,float:right就是向右浮动,我们先看一个不浮动的例子把,首先是这个html文件,这个文件我们是一直都不会动它了,它的内容如下:

	<link rel="stylesheet" type="text/css" href="my.css"><div id="demo1">区块1</div><div id="demo2">区块2</div><div id="demo3">区块3</div><div id="demo4">区块4</div>
Salin selepas log masuk
然后我们写一下它的对应的my.css文件,内容如下:

#demo1{	background-color: #933;	height: 100px;width:300px;	 }#demo2{	background-color: #0F0;	height:60px;width:200px;}#demo3{	background-color: #F00;	height: 140px;width: 80px;}#demo4{	background-color: #CCC;	height: 80px;width: 180px;}
Salin selepas log masuk
那么此时它的界面如下:

 下面我们通过在第二个div那里让它右浮动,添加下面一条信息,即:

#demo2{	float: right;	background-color: #0F0;	height:60px;width:200px;}
Salin selepas log masuk
我上面只给出了demo2的变化,然后我们看下面的效果:

       下面说一下什么是“普通流”,可能这是会让新手朋友特别迷茫的一个话题,所谓普通流,就是向书本一样,从上到下,从左到右进行布局,正常的HTML元素都是在普通流中的,而一个元素一旦浮动,它就不在普通流中了。比如我们的区块2是右浮动的,它会去寻找他的上边一个元素,它上一个元素是区块1,而区块1是普通流中的元素,则区块2就和区块1的底部是对齐的,普通流决定了它的上下位置,浮动只能决定它的左右位置,一旦上下位置 被确定,那么接下来就是它的左右位置了,由于它是右浮动,因此,它在右边。而区块三去找它的上一个元素,发现它的上一个元素是标准流中的元素,因此,它会自动和区块1的低端对齐,并且向下排列。

        那可能有人会问,如果区块2左浮动呢,我们把demo2的float属性修改为left,并且我们修改一下区块三的宽度,让它更宽一些,要不解释不清楚,效果图如下:



     我想上图的解释也算比较清楚了,就不再文字说明了。可能有人会问,那么如果两个区块一起浮动呢?我们先来看都是右浮动的情形:


       由于这里的宽度足够宽,这种布局完全放得下,但是,如果我们把宽度变窄呢?看下面图解:


其实这里还算好理解的,那么我们继续向左拉伸呢?会出现下面的情况:


其实只要宽度足够宽,区块3依然是和区块2的左边而不是在它的下面,但是宽度太低的情况下就不是这样了,它很无奈的跑到了区块2的下面,然后另起一行,从右边开始排列。

其实右浮动会定位了,那么左浮动也就很清楚了,它的效果如下:


其实同样的,如果空间过小,那么区块3也会被挤下去,挤到新的一行中,如下代码:



      于是,可以总结为这么一句话:“浏览器首先对处于普通流的区块进行排列,它们很简单,从上到下进行排列即可。对于浮动的元素,它会查看它上面的元素最近的哪一个处于普通流中的元素,并且把它的底端当成自己的顶端,然后根据浮动规则,继续排列。由于是先进行的普通流的布局,因此,浮动的元素会遮盖普通流中的元素。”

     这一节先讲到这里啦。。。 下面再开始说清楚浮动的。。。。




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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan butang bootstrap Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Cara mengubah saiz bootstrap Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Cara memasukkan gambar di bootstrap Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara Menyiapkan Kerangka untuk Bootstrap Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Cara melihat tarikh bootstrap Cara melihat tarikh bootstrap Apr 07, 2025 pm 03:03 PM

Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.

Cara Menulis Garis Pecah Di Bootstrap Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Cara Mengesahkan Tarikh Bootstrap Cara Mengesahkan Tarikh Bootstrap Apr 07, 2025 pm 03:06 PM

Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.

Cara menetapkan bar navigasi bootstrap Cara menetapkan bar navigasi bootstrap Apr 07, 2025 pm 01:51 PM

Bootstrap Menyediakan panduan mudah untuk menubuhkan bar navigasi: Memperkenalkan Perpustakaan Bootstrap untuk membuat bar navigasi Tambah Identiti Jenama Buat Pautan Navigasi Tambah Elemen Lain (Pilihan) Laraskan Gaya (Pilihan)

See all articles