Html5---div布局方式

目录

它是什么

怎么使用

浮动

常见问题

---

它是什么
div是块级元素：
块级元素在页面中的独占一行 默认情况下的高度由里面的内容决定。由于块级元素独占一整行 那么使用div进行布局的话 div(盒子)和div(盒子)之间是上下排列的 

怎么使用

我们在实际的开发网页中，网页的整体部分一般是由div标签来进行布局的。当然在使用div布局之前就要了解div的属性
还有块级元素之间不仅能套入行内元素 还可以嵌入块级元素  但在嵌入块级元素的时候 由于块级元素的默认属性 它们之间是呈现上下排列的 所以就需要使用浮动

浮动

<div>  </div>

div{
    float: left;
    float: right;
}

常见问题 

消除浮动塌陷的三种方法

1.给父级元素定义高度

2.给父级元素使用overflow: hidden;方法消除浮动塌陷

3.使用clear: both;方法消除浮动塌陷
 

div {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }