关于css设置float后的div块碰撞问题_html/css

首頁

web前端

html教學

关于css设置float后的div块碰撞问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:56 AM

cssdivfloat設定

<!doctype html><html>	<head>		<meta charset="gb2312"/>		<title></title>		<style type="text/css">            * {                margin:0;padding:0;            }            #dv1 {                                border: 1px solid red;                width: 400px;                height: 300px;            }            #dv2 {                /*display:inline;  dv3加浮动，dv2不会被挤开，是因为dv3只是停留在它那一行，没有影响到文件流，但是为什么把dv2设置成行级元素就会被下面的dv3挤开呢？？*/                float:left;                width: 200px;                height: 200px;                border: 1px solid green;            }            #dv3 {                               width: 400px;                height: 100px;                border: 1px solid blue;                               /*position:absolute;*/            }		</style>		<script type="text/javascript">					</script>	</head>	<body style="font-size:20px">        <div id="dv1">            我是dv1中的文本        </div><div id="dv2">我是dv2中的文本</div><div id="dv3">我是dv3中的文本</div>	</body></html>

1、如果给dv2设置float，是不会挤动上方的div的，但是下方的div却会挤到上面来，这是为什么呢？

2、我老师说下面的div挤上来是因为float之后的dv2会浮到前面来，也就是不跟dv3在同一个平面了，所以留下一个空的位置，下方的dv3就顶到了这个空位上，这个说法正确吗？

3、如果是这样的话，那dv2已经浮到了前面来，那么跟dv1也不在一个平面了，为什么不会浮动到最左上角呢？都不在一个平面了为什么会被上面的dv1顶住上不去呢？

4、另外如果把dv1设置display:inline，设置为行内元素，dv2又会挤到最左上角，并且把dv1挤到右侧，按我老师的说法，既然都不在一个平面上，为什么dv1会被dv2挤开呢？

求大牛们解答，谢谢！！！

回复讨论(解决方案)

1.前面的div不影响，只是它自己浮动起来后影响后面的div。你可以看成排队，前面一个人到上一层空间去了，后面的人就可以占有她位置。
2.你老师说的对
3.因为dv1是块级元素（默认display是block）。当然dv2是飘不过去了。 block英文是障碍物的意思，很明了了吧
4.“dv1设置display:inline” 就将dv1由块级元素转变成了内联元素，内联元素是不占空间的。所以dv2就可以飘过去了。

你可以看看下面这个帖子的第6和22课。
http://bbs.csdn.net/topics/390648164

百度一下：内联元素与块级元素的区别

具体看看http://bbs.csdn.net/topics/390648164 这个里面的第六课

谢谢，基本明白了，问下你这个3D图是怎么弄出来的？自己画的吗？

用cdr画的，熟悉的话很简单。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。