【静态页面架构】CSS之定位
CSS架构
1.浮动；
是以float属性设置容器指定的位置
<style>
div {
width: 200px;
height: 200px;
}
#qq {
background-color: lightcoral;
/*float: right;*/
}
#yy {
/*width: 300px;
height: 300px;*/
background-color: yellowgreen;
/* 当前元素设置为浮动后，只影响当前元素后面的所有元素的位置 */
/*float: left;*/
}
#cc {
background-color: lightskyblue;
float: left;
}
</style>
</head>
<body>
<div id="qq"></div>
<div id="yy"></div>
<div id="cc"></div>
</body>块级元素；
不再独占一行，多元素之间会水平方向排列设置浮动后，会从页面的文档流脱离
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
/*默认宽度是父级宽度的100%
高度是后者的所有元素高度之和*/
float: left;
/*左浮动*/
/*
* 宽度默认是 0 或者所有后代元素宽度之和
* 高度默认是 0 或者所有后代元素高度之和
多个块级元素都设置为浮动后 -> 垂直方向排列变为水平方向排列
* 如果占满父级元素宽度的100%后，会自动换行
*/
}
</style>
</head>
<body>
<div></div>
</body>示意图；
内联元素；
<style>
span{
background-color: red;
width: 200px;
height: 200px;
/*宽和高是以内容撑起*/
/*设置宽高属性是无效的*/
float: left;
/*设置完浮动后
其宽高属性才有效
多个内联元素之间依旧是水平方向的排列*/
}
</style>
</head>
<body>
<span>呼延觉罗</span>
<span>爱新觉罗</span>
</body>示意图；
清除浮动；
以clear属性来设置清除浮动
<style>
div{
width: 200px;
height: 200px;
float: left;
}
#qq{
background-color: red;
}
#yy{
background-color: blue;
clear: both;
/*清除浮动*/
}
#cc{
background-color: yellow;
}
</style>
</head>
<body>
<div id="qq"></div>
<div id="yy"></div>
<div id="cc"></div>
</body>示意图；
高度塌陷；
在没有给父级容器设置高度，而且设置子元素浮动，父级失去高度
<style>
.qq{
border: 10px solid black;
overflow: hidden;
}
.hh{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="qq">
<div class="hh"></div>
</div>
</body>示意图；
