CSS初探学习总结提高 三
程序员文章站
2022-07-14 22:52:25
...
前面一二两节记录的都是CSS的基础知识，并且都是标准布局，块级，行级元素自上而下的布局，也称作标准布局。接下来认识CSS三个布局中（标注，浮动，定位）的浮动布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.headView,
.twoView,
.fourView,
.bottomView {
width: 960px;
margin: 0 auto;
margin-bottom: 10px;
}
.headView {
height: 80px;
background-color: pink;
}
.leftView {
width: 160px;
height: 350px;
background-color: skyblue;
margin-right: 10px;
float: left;
}
.rightView {
width: 790px;
height: 350px;
background-color: deeppink;
float: left;
}
.clearfix:before, .clearfix:after { /*双伪元素清除浮动*/
content: "";
display: block; /* 触发bfc 防止外边距合并 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*只在ie6,7中生效*/
}
.fourView {
height: 400px;
background-color: orange;
}
ul {
list-style: none; /*列表去除小数点*/
}
.fourView ul li {
margin-right: 13px;
height: 400px;
width: 230px;
background-color: pink;
float: left;
text-align: center;
}
.fourView ul li:last-child {
float: right;
margin: 0;
}
.fourView ul li:nth-child(even) { /*even偶数*/ /*odd奇数*/
background-color: skyblue;
}
.bottomView {
height: 150px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="headView"></div>
<div class="twoView clearfix">
<div class="leftView"></div>
<div class="rightView">
<p>1.浮动布局，不给宽，宽取决内容的多 float:left right none</p>
<p>2.有了浮动布局后，元素具有行内块元素的特性</p>
<p>3.浮动布局保证父级是标注布局</p>
<p>4.多个布局，要保证同时具备浮动布局，一个有，一个没有，会叠加</p>
<p>5.浮动的目的让多个块级元素在同一行，并且没有缝隙</p>
<p>6.浮动布局不会遮住内外边距</p>
<p>7.清除浮动：不给父级高度，高度由子级内容撑开，入股子级有浮动布局，父级要清除浮动</p>
<p>7.1 额外标签发 clear:both 左右全部清除 额外写一个标签声明</p>
<p>7.2 父级添加overflow属性方法</p>
overflow:hidden 触发BFC,可以清除浮动auto,scroll</p>
<p>7.3 after伪元素清除浮动 .clearfix:after {content:”.”,display:block,heitht:0,visiblity:hidden(隐藏盒子),cleat:both}.clearfix{*zoom:1 代表只有ie,67使用}</p>
<p>7.4 双伪元素清除浮动（推荐）
.clearfix:before,.celarfix:after{content:””,display:block} .clearfix:after{clear:both} .clearfix{*zoom:1}</p>
</div>
</div>
<div class="fourView clearfix">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="bottomView"></div>
</body>
</html>