div+css浮动的解决方法_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

div+css浮动的解决方法_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:44 AM

　　已知父div容器，父容器包含两个子div，在两个子div标签后面添加一个清除浮动(clear)的div标签，父div标签的内部(左右两边/*css5*/)浮动就清除了。

　　如果有一个div容器

，包含了一个子容器

，子容器设置一个宽度、高度、背景色，如不设置内、外边距以及清除浮动clear、浮动float，此时子容器div默认居左。那么是否真的居左，我们设置一下float:left；发现设置了居左left，子容器的div产生了浮动，子容器div离大容器顶部有一定距离，然后我margin-top:10px, 子容器在原有的基础上向下移动了margin的距离，也就是说，浮动，不随margin padding边距影响。

    <body>        <div class="divcss5">            <div class="clear"></div>

        </div>     </body>

　　如果，我现在给子容器设置top:10px,看到的效果是不发生变化，也就是是说浮动不会随着top，left发生改变。当我给子容器设置相对位置position:relative;看到的效果是怎么样的呢？现在子容器的效果还是浮动的，但是当我分别设置margin-left:10px和 left:10px;看到子容器分别会随着margin-left和left发生改变相应的位置，同样margin-top和top都会发生变化。

　　也就是说，当子容器设置浮动float，接着给子容器设置margin会有作用，设置left 、top是没有作用，只有给子容器设置相对位置的时候，不仅margin能起作用，left、top也能会起作用，那么是不是说left，top是在相对位置的时候才起作用呢？那么现在我们就做一个实验，我在子容器里把float:left;position:relative;都删掉，不会浮动，也不会有相对位置，然后写上top:10px;left:10px;相应的代码如下：.clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;};结果是子容器根本没有移动过位置，所以，事实证明，left、top是在设置了相对位置position的时候才起作用。margin就是不管你设置position与不设置position都会起作用。

　　继续上面的float浮动，如果现在给float设置inherit;设置继承浏览器的浮动属性，此时我们看到的是不浮动的，默认居左。同样的设置 none initial也不会有作用。只有子容器设置了浮动left和right，子容器才会出现浮动。

　　下面，我们用一种其他的方法来清除浮动，HTML代码还是以上的代码，大容器的div的css代码还是上面的代码.divcss5{padding:10px 0;width: 100%; left: 50%;right: 50%;background: #007CB5;}，
子容器的代码还是上面的代码：.clear{width: 200px;background: #f2e;color:#030617;height: 20px;float:left;}，此时看到的是浮动的效果，子容器浮在大容器上面，同样的原理，我还是用清除浮动clear:both；我们可以用css伪元素:after，下面就是一个很简单的css代码，给父容器写css伪类，代码：.divcss5:after{content: "1";clear: both;display: block;}，此时，我们看到的是，清除了大容器的浮动，并且在浏览器上能看到子容器被包含在了大容器内部。在浏览器上F12查看浏览器，可以看到after包含在了父容器内，所以，他相当于在给父容器加一个clear，只是少了一个div层，这个层被.divcss5:after实现了。

陳述

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

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

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。

See all articles