内部DIV设置浮动后无法撑开外部DIV的解决办法

每次做东西都会遇到,每次都记不住,记录下来分享给大家。

第一种:在外层DIV,也就是这里的DIV1的CSS里面加入以下CSS代码

overflow: auto;

这种方法都可以实现DIV2把DIV1撑开。不过这里建议大家使用第一种方法,要养成一个习惯,在浮动应用完后消除浮动,这样后面的DIV就不会继承这个浮动(就像在编程的时候,在打开数据库,操作完后,要养成个习惯在后面把数据库关闭)。也就是说浮动这个东西会被继承,除非消除这个浮动,才不会让后面接着的DIV受到继承。其实不仅是DIV,其他的像P等其他的容器都会有继承的效应,大家要养成一个习惯记得要消除浮动。

第二种: 在浮动元素结尾添加一个空的div:

<div style="clear:both"></div>

利弊:方法简单,常用,有违结构与表现分离原则

第三种:爸爸跟着儿子一起浮动:

给父级div添加浮动

.parent{float:left}

利弊:代码简单,排版找虐

第四种:display:table:

Amaze ui 里am-g的用法

.parent{ display:table}

利弊:代码简单,盒模型变成表格,此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

第五种:高端借鉴:

方法2跟4的升级版,不破坏结构

.parent:before,.parent:after {
content:"";
display:table;
}
.parent:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.parent { zoom:1; }
.parent:after {content:"/200B"; display:block; height:0; clear:both; }
.parent { *zoom:1; }

浮动注意事项:

1.若内层div浮动的外层div也需要浮动。内层div用了float则其已经脱离了标准文档流,外层div不浮动则无法被内层浮动后脱离文档流的div撑起来。(通过外层div设置border颜色可以验证)当然,若你对外层div是否被撑起来没什么要求,也可以不予浮动。不浮动的外层div,可以用来控制其与其他临近非浮动元素的位置关系,如居中的margin:0 auto;等等。
2.多个div块通过float:left从左往右排开,则这几个div都要float:left浮动起来。
3.外层div浮动后紧跟着的不浮动对象(比如有一个div)要在其CSS中用clear:both清除浮动;否则该不浮动对象将钻到浮动div的下面。

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/242090.html

(0)
上一篇 2022年4月7日 16:56
下一篇 2022年4月7日 16:56

相关推荐

发表回复

登录后才能评论