登陆 注册

HTML浮动问题与处理

守望者 2020-03-19 339人围观 ,发现0个评论 htmlcss

      这是所有浏览器都面临的一个问题,也算是自身的一个bug。

当我们使用浮动布局使得多个块状元素平铺时,会发现一个问题,那就是他们的(灰色的)包含框并没有被“撑起来”,而仍然是缩成一团,让人一头雾水。

如下图所示:

html 浮动问题

   下面给出解决方案:


方案一,巧用CSS中的清除浮动属性:

   我们在包含框内的最后加上元素

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

,并在CSS中定义样式 

div.clear{clear: both;}


   部分低版本浏览器还需要为 包含框增加样式:

    zoom:1;


 或者一个边框样式

   

方案二,为包含框增加样式属性:

  overflow: hidden;

这种方案简单高效,建议使用


采取以上方案后发现,父包含框(背景灰色)被“撑起来了”,当我们在内容区输入更多文字时,

发现父包含框大小也会随着子元素动态调节

html浮动问题解决


另外,为每个浮动元素增加这个样式还可以自动填充满包含框,适用于块元素大小不固定的时候,可以动态调节

 padding-bottom: 9999px;
 margin-bottom: -9999px;



实例代码如下,可以实测一下:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div.wrap{
 
background-color: darkgray;
overflow: hidden;
/*zoom: 1;
border: solid 1px red;*/
}
div.wrap div{
width: 100px;
float: left;
 
/*自动填满父包含框,使用时,父包含框必须设置 overflow: hidden;*/
padding-bottom: 9999px;
margin-bottom: -9999px;
}
 
div.content1{background-color: orange;}
div.content2{background-color: yellow;}
div.content3{background-color: green;}
/*巧用css清除属性强制换行,撑起父包含框*/
/*div.clear{clear: left;}*/  
</style>
</head>
<body>
<div class="wrap" contenteditable="true">
<div class="content1">
<h3 contenteditable="true">内容区域1</h3>
<p>正文内容</p>
<p>正文内容</p>
</div>
<div class="content2">
<h4>内容区域2</h4>
<p>正文内容</p>
<p>正文内容</p>
</div>
   <div class="content3">
       <h3>内容区域3</h2>
   <p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
<p>正文内容</p>
    </div>
<!--<div class="clear">sadfasdf</div>--> 
   包含框
</div>
</body>
</html>


               转载请附上本文链接:https://tufeng.xyz/htmlcss/20.html,谢谢合作!


       

请发表您的评论
请关注微信公众号
微信二维码