CSS初探学习总结提高三

xj_love

于 2018-11-01 11:45:18 发布

阅读量182

点赞数

分类专栏：大前端开发移动端+大前端+后台学习整合文章标签：浮动布局清除浮动

本文链接：https://blog.csdn.net/xj_love/article/details/83617958

版权

移动端+大前端+后台学习整合同时被 2 个专栏收录

56 篇文章 4 订阅

订阅专栏

大前端开发

10 篇文章 0 订阅

订阅专栏

前面一二两节记录的都是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>