Rumah hujung hadapan web html tutorial 关于清除浮动的一些简单理解。 - DD狗

关于清除浮动的一些简单理解。 - DD狗

May 21, 2016 am 08:42 AM

      在我们学习css时,利用浮动可以为我们的的布局样式提供很大的便利,但是随着而来,我们也会遇到清除浮动的问题,关于清除浮动,我谈一谈我的一些简单看法。

       首先,我们为什么要清除浮动,因为浮动会使该标签脱离文档流,对前后的元素,还有父元素(边框,内容)都会造成影响。

下面说一说清除浮动的方法:

1 定义height

 为父元素增加一个固定或最少的height,因为当子元素设置为浮动后,脱离了文档流后,会导致父元素的边框无法撑开。所以我们可以增加一个

   “height:”或者“min-height:“来解决。

这种方法的优点在于 : 上手容易,简单易懂。

              缺点在于 : 要对高度进行详细的确定,且不灵活。


 

2 利用clear:both

  在父元素的结束标签加入clear:both。在父元素内增加一个空白签,来声明其周围忽略浮动。

html中

css中   .clear{

   clear:both

}

这种方法的优点在于 简单方便。

             缺点在于 编程最忌讳添加很多空标签也会对以后的修改造成麻烦。


 

3 利用overflow:hidden

为父元素在css中添加 overflow:hidden,我们现在看看他们的意思是什么,overflow:溢出 ,hidden:清除。也就是清除溢出的部分,不显示其内容。那么很容易明白,利用这个,就是将带有浮动属性的

进行了清除。

."class名称"{

overflow:hidden

}

这种方法的优点在于:代码使用的少,错误少。

              缺点在于:无法与position一起使用,也不能同时定义height,因为是将多余的部分清除掉。


 

 

以上三个方法是我在初学css清除浮动时用到学到的方法,作为一个web小白,能力有限,所解决问题的办法可能也不是最好的,欢迎大家提议,谢谢。

 

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

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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)

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? Apr 04, 2025 pm 11:54 PM

Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...

Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Apr 04, 2025 pm 11:30 PM

Algoritma Adaptif Kedudukan Y-Axis untuk Fungsi Anotasi Web Artikel ini akan meneroka cara melaksanakan fungsi anotasi yang serupa dengan dokumen perkataan, terutama bagaimana menangani selang antara anotasi ...

Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Apr 05, 2025 am 06:15 AM

Untuk mencapai kesan penyebaran dan membesarkan imej sekitarnya selepas mengklik pada imej, banyak reka bentuk web perlu mencapai kesan interaktif: klik pada imej tertentu untuk membuat sekitar ...

HTML, CSS, dan JavaScript: Alat penting untuk pemaju web HTML, CSS, dan JavaScript: Alat penting untuk pemaju web Apr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

See all articles