浮动元素为什么会卡住？
Mar 31, 2017 pm 05:10 PM<!DOCTYPE html> <html> <head> <title>浮动元素卡住</title> </head> <body style="width:500px;"> <div style="background-color:#0F0;width:200px;height:110px;float:left;"></div> <div style="background-color:#F00;width:200px;height:100px;float:left;"></div> <div style="background-color:#00F;width:200px;height:100px;float:left;"></div> <div style="background-color:#F00;width:200px;height:100px;float:left;"></div> <div style="background-color:#000;width:200px;height:100px;float:left;"></div> </body> </html>
为什么蓝色区域不在绿色的下面？下面的红色为什么也不能在绿色的下面？
回复讨论(解决方案)
<div style="background-color:#0F0;width:200px;height:110px;float:left;"></div>
高度不一致
浮动本来就这样。。习惯就好了。。一般如果2个一行。。都有个清除浮动。。就会自动下来。
<div style="background-color:#0F0;width:200px;height:110px;float:left;"></div> <div style="background-color:#F00;width:200px;height:100px;float:left;"></div> <div style="clear:both;font-size:0;height:0;"></div> <div style="background-color:#00F;width:200px;height:100px;float:left;"></div> <div style="background-color:#F00;width:200px;height:100px;float:left;"></div> <div style="background-color:#000;width:200px;height:100px;float:left;"></div>
我知道高度不一样，也知道清除浮动可以达到效果，我想知道的是为什么有这样的结果？？
因为块级元素独占一行，你浮动了过后这边没有了容下他的空间，自然跑到右边去了啊
你应该换个思路
不要问为什么
你已经看到了 结果
也就是你 已经知道在什么样的情况下 会发生什么事情了
所见即所得啊
以上就是浮动元素为什么会卡住？的内容，更多相关内容请关注PHP中文网（www.php.cn）！
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Pourquoi wps reste-t-il bloqué dès que je l'ouvre ?
Oct 23, 2023 pm 04:54 PM
Pourquoi wps reste-t-il bloqué dès que je l'ouvre ?
Comment résoudre le problème de la réinitialisation de Win10 bloquée à 1%
Dec 25, 2023 pm 05:49 PM
Comment résoudre le problème de la réinitialisation de Win10 bloquée à 1%
Solution pour la mise à jour Win11 bloquée à 88 %
Jan 11, 2024 pm 09:54 PM
Solution pour la mise à jour Win11 bloquée à 88 %
La mise à jour Win10 2004 plante à 91%, comment y faire face ?
Dec 28, 2023 pm 01:11 PM
La mise à jour Win10 2004 plante à 91%, comment y faire face ?
Guide de mise en page HTML : comment utiliser des éléments flottants pour implémenter une mise en page multicolonne
Oct 27, 2023 pm 03:24 PM
Guide de mise en page HTML : comment utiliser des éléments flottants pour implémenter une mise en page multicolonne
Le processus d'installation du système Win10 est bloqué, que dois-je faire ?
Dec 28, 2023 pm 02:04 PM
Le processus d'installation du système Win10 est bloqué, que dois-je faire ?
Que dois-je faire si mon WPS est bloqué et que je n'ai pas eu le temps de le sauvegarder ?
Mar 20, 2024 pm 07:01 PM
Que dois-je faire si mon WPS est bloqué et que je n'ai pas eu le temps de le sauvegarder ?
Que dois-je faire si WPS reste soudainement bloqué et ne peut pas se fermer mais qu'aucun fichier n'est enregistré ?
Mar 13, 2024 pm 06:07 PM
Que dois-je faire si WPS reste soudainement bloqué et ne peut pas se fermer mais qu'aucun fichier n'est enregistré ?
