DIV+CSS布局3

布局相关属性：

浮动属性——float:left  right

清除浮动——clear:both

溢出处理——overflow:hidden(隐藏超出层大小的内容) scroll(无论内容是否超出层大小都添加滚动条)  auto(超出时自动添加滚动条)

---

一、浮动属性

浮动属性——float:left  right

.div1,.div2,.div3,div4,.div5{

width:60px;

height:60px;

background-color:red;

}

.div1,.div2,.div3,div4,.div5{

width:60px;

height:60px;

background-color:red;

float:right;

margin:10px;

}

---

二、清除浮动

解决浮动与非浮动元素之间布局问题

例如div1和div2浮动，div3不浮动

.div1{

width:220px;

height:280px;

background-color:red;

float:left;

}

.div2{

width:370px;

height:280px;

background-color:green;

float:right;

}

.div3{

width:600px;

height:120px;

background-color:blue;

}

.div3{

width:600px;

height:120px;

background-color:blue;

clear:both;

}

如果想div3与div1、div2之间有间距有两种解决方法

第一种

.div2{

width:600px;

height:120px;

background-color:blue;

margin-bottom:10px;

}

第二种

在div3和div1、div2之间加一个div，并设置clear：both

---

三、溢出处理

如果层里面的内容超出层的大小就会溢出

溢出处理——overflow:hidden(隐藏超出层大小的内容) scroll(无论内容是否超出层大小都添加滚动条)  auto(超出时自动添加滚动条)

overflow:hidden(隐藏超出层大小的内容)

overflow:scroll(无论内容是否超出层大小都添加滚动条)

overflow:auto(超出时自动添加滚动条)

待续。。。