HTML/CSS常见问题一:给table加边框(border),sub_div设float后导致父div无法自动撑开

 1.正确地给table加边框(border)

注意:border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

  <style>
      table { border-right:1px solid red; border-bottom:1px solid red; border-collapse: collapse; width: 300px; text-align: center;}
      table tr th, table tr td { border-left:1px solid red; border-top:1px solid red;}
  </style>

  <table style="margin-top:50px;">
      <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
      <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
      <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
      <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
  </table>

 

2.解决子div设float后导致父div无法自动撑开(常用2种)

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

1)直接给父div设置"display: inline-block;"

2)在最后添加一个sub_div用来清除浮动：<div style="clear:both;"></div>;

<div style="display: inline-block;width:500px;margin-top:50px;border:2px solid;padding:5px;">
  <div style="background-color:blue;float:right;width:200px;height:100px;"></div>
  <div style="background-color:red;float:left;width:200px;height:100px;"></div>
</div>

 

注意:

1.clear属性指定段落的左侧或右侧不允许浮动的元素。

2. display 属性规定元素应该生成的框的类型。