1. 程式人生 > >DIV+CSS布局(三)

DIV+CSS布局(三)

滾動 gin tex class clear 滾動條 meta utf-8 div

1.float浮動屬性

  left左浮動 right右浮動

2.clear 清除浮動

  clear:both

3.overflow 溢出處理

  hiddle 隱藏超出層大小的內容

  scroll 無論內容是否超出層大小都添加滾動條

  auto 超出時自動添加滾動條

eg:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Div+Css布局(浮動以及溢出處理)</title>

<style type="text/css">

body{

padding: 0px;

margin: 0px;

}

.div{

width: 960px;

height: 600px;

margin: 0 auto;

background-color: #f1f1f1;

}

.left{

float: left;

width: 260px;

height: 460px;

background-color: #cccccc;

}

.right{

float: right;

width: 690px;

height: 460px;

background-color: #dddddd;

}

.bottom{

clear: both;

width: 200px;

height: 960px;

background-color: red;

}

.jianjie{

width: 260px;

height: 20px;

background-color: red;

}

</style>

</head>

<body>

<div class="div">

<div class="left">

<div class="jianjie">

最後一節課最後一節課最後一節課最後一節課最後一節課

</div>

</div>

<div class="right"></div>

<div class="bottom"></div>

</div>

</body>

</html>

DIV+CSS布局(三)