communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > 为什么后面那个div覆盖前面div 如果后面也加float:left 就不覆盖了_html/css_WEB-ITnose

为什么后面那个div覆盖前面div 如果后面也加float:left 就不覆盖了_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 12:22:03
original
1359 Les gens l'ont consulté

float:left; HTML css div

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




无标题文档




10

20






回复讨论(解决方案)

以后代码要用代码框编辑，要不然这样人家看也不方便。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#divmain{margin:0 auto;width:470px;background:#999;}    #div1{float:left;margin:0 auto 0 20px;width:100px;height:100px;background:#fff;/* z-index=-1;*/} #div2{width:100px;height:100px;background:#CCC;}        </style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><div id="divmain">52345623546<div id="div1">10</div><div id="div2">20345345</div></div></body></html>
Copier après la connexion
Copier après la connexion

这样子看起来比较明显，因为float之后div1脱离正常流，所以浮动在其他div之上。如果你把div2也变成float那么，div1，div2就变成同样的了，div2就浮动在div1之后，详情请参见css权威指南关于float的说明。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#divmain{margin:0 auto;width:470px;background:#999;}    #div1{float:left;margin:0 auto 0 20px;width:100px;height:100px;background:#fff;/* z-index=-1;*/} #div2{width:100px;height:100px;background:#CCC;}        </style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><div id="divmain">52345623546<div id="div1">10</div><div id="div2">20345345</div></div></body></html>
Copier après la connexion
Copier après la connexion

这样子看起来比较明显，因为float之后div1脱离正常流，所以浮动在其他div之上。如果你把div2也变成float那么，div1，div2就变成同样的了，div2就浮动在div1之后，详情请参见css权威指南关于float的说明。

+1

Étiquettes associées：
为什么后面那个div覆盖前面div 如果后面也加float:left 就不覆盖了
source：php.cn
Article précédent：请问css中font: 0/0 a;起什么作用_html/css_WEB-ITnose Article suivant：用media player播放不同类型的视频文件_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2166
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2315
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1950
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1828
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1880
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal