子div设置float后会导致父div无法自动撑开

简介: 注: 文章部分转载 彩泉 - 博客园原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。

注: 文章部分转载 彩泉 - 博客园

原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。

以下是几种解决办法(假设父div的class为“container”):

  • 方法1、使用伪类
container::after{
    display: block;
    height:0;
    content: '';
    clear: both;
}
container{
    display: inline-block; /*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/
}
  • 方法2、不撑开的原理是overflow不可见,所以给父div添加overflow:auto;就行,IE要用_height:1%;
container{
    overflow: auto;/*让主要内容区随内容自动撑开*/
    overflow-y:hidden;/*把出现的滚动条隐藏,但是底下会被遮到一点,不完美*/
     _height:1%;/*对IE的hack*/
}
  • 方法3、可以专门最后添加一个子div用来清除浮动:<div class="clear"></div>
    设置样式.clear{clear:both; font-size:0; height:1%;}

  • 方法4、可以设置父div的高度(也就是手动撑开,不灵活);

  • 方法5、直接给父div设置 display: inline-block; 这样也自动撑开

  • 方法6、直接给子div设置 display: inline-block; 也能自动撑开,但是排版问题有待研究学习

  • 方法7、从网上还发现了一种方法,给父div增加属性:display:table;

  • 方法8、 子div浮动我就套不住你?OK,我让父div也浮动: 父div设置 float: left; 也可以

相关文章
|
前端开发
web前端学习(二十四)——CSS3浮动属性(float)、清除浮动属性(clear)的相关设置
web前端学习(二十四)——CSS3浮动属性(float)、清除浮动属性(clear)的相关设置
web前端学习(二十四)——CSS3浮动属性(float)、清除浮动属性(clear)的相关设置
|
移动开发
快应用div纵向排列-----快应用无法使用float
在开发快应用布局时,要兼容各种大小屏幕的div的纵向排列,传统h5过度过来的同学会用到float:left但是在快应用中无法使这类写法生效 这时需要使用以上方向代替:display: flex; flex-direction: column; padding:20px; 此方法请写在需要纵向排列元素的父div中。
1125 0
快应用div纵向排列-----快应用无法使用float
|
Web App开发 容器
Internet Explorer中Float DIV和Clear DIV之间奇怪间隙的Bug
Container: padding: 20px; Float Float Clear 在浮动的DIV下面放一个有clear属性的DIV是我们做布局的时候常常用的一种方式。如果这个浮动的DIV和有clear属性的DIV是放在一个作为容器的DIV里面,而这个最外层的DIV由具有padding的时候,在IE浏览器里面,浮动的DIV和有clear属性的DIV之间会有一个奇怪的间隙。
567 0
|
5月前
|
存储 Java
百度搜索:蓝易云【Java语言之float、double内存存储方式】
由于使用IEEE 754标准进行存储,float和double类型可以表示非常大或非常小的浮点数,并且具有一定的精度。然而,由于浮点数的特性,它们在进行精确计算时可能会存在舍入误差。在编写Java程序时,需要注意使
90 0
|
3月前
|
存储 编译器 C++
C++从遗忘到入门问题之float、double 和 long double 之间的主要区别是什么
C++从遗忘到入门问题之float、double 和 long double 之间的主要区别是什么
|
3月前
|
存储 SQL 数据库
MySQL设计规约问题之为何推荐用DECIMAL代替FLOAT和DOUBLE来存储精确浮点数
MySQL设计规约问题之为何推荐用DECIMAL代替FLOAT和DOUBLE来存储精确浮点数
|
5月前
|
存储 C语言
计算 int, float, double 和 char 字节大小
计算 int, float, double 和 char 字节大小。
67 3