布局相关属性:
浮动属性——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(超出时自动添加滚动条)
待续。。。