html 内部浮动外部不,DIV设置浮动后无法撑开外部DIV的解决办法
生活随笔
收集整理的這篇文章主要介紹了
html 内部浮动外部不,DIV设置浮动后无法撑开外部DIV的解决办法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
當DIV1里面嵌套有一個DIV2,當DIV2設置了浮動,那么DIV1是無法被撐開的,也就是說DIV2在這里相當于浮在了頁面上方,跟DIV1不在同一個層面,導致了DIV2無法把DIV1給撐開,這是一個老生常談的問題,也是困擾很多剛接觸DIV+CSS的朋友的一個問題。
先來看看這個問題的實際效果
這里本來DIV1是套在了DIV2的外面的,如果是使用表格做的話,那么DIV1肯定被撐開了,效果應該是如下所示
那如何解決這個浮動了之后無法把容器撐開的局面呢?解決的方法這里介紹2仲。
第一種:在浮動結束的容器后面加上這段代碼
意思是清除浮動。
第二種:在外層DIV,也就是這里的DIV1的CSS里面加入以下CSS代碼
overflow: auto;
這2種方法都可以實現DIV2把DIV1撐開。不過這里建議大家使用第一種方法,要養成一個習慣,在浮動應用完后消除浮動,這樣后面的DIV就不會繼承這個浮動(就像在編程的時候,在打開數據庫,操作完后,要養成個習慣在后面把數據庫關閉)。也就是說浮動這個東西會被繼承,除非消除這個浮動,才不會讓后面接著的DIV受到繼承。其實不僅是DIV,其他的像P等其他的容器都會有繼承的效應,大家要養成一個習慣記得要消除浮動。
《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的html 内部浮动外部不,DIV设置浮动后无法撑开外部DIV的解决办法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html盒子移动动画代码,HTML5/C
- 下一篇: html如何引入swiper,vue-c