css浮动

最新推荐文章于 2024-07-24 14:20:14 发布

英雄之旅——hyc

最新推荐文章于 2024-07-24 14:20:14 发布

阅读量95

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/hhyycc22_/article/details/105993754

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.CSS float(浮动) 基础知识

会使元素向左或向右移动，只能左右，不能上下
浮动元素碰到包含框或另一个浮动框，浮动停止
浮动元素之后的元素围绕它，之前的不受影响。
浮动元素会脱离标准流

2.浮动基础语法

float :left; 左浮动
float:right; 右浮动
float:none;没有浮动

3. 清除浮动

在浮动元素的下面加一个空的div盒子，clear:both可以清除浮动元素对下面元素的影响 <div class="clear"></div> .clear{clear:both;}
给浮动元素的容器添加overflow:hidden;zoom:1;zoom会触发hasLayout兼容IE6,7
使用css3 :after伪元素，这是比较麻烦的方法，所有不推荐使用。在浮动元素

//在浮动元素后面创建一个div
.class:after{
 	content:"."; //内容
 	display:"block"; //块状元素
 	height:0;     //高度为0
 	visibility:hidden;  //隐藏
 	clear:both;  //清除浮动
 	}

4. 父级元素定义height.只适合高度固定的布局
5. 父级元素也一起浮动。不推荐，会产生新的浮动问题

5.实战

这个例子只演示了第一种和第二种清除浮动的方法，说实话已经够用了，其他的就不演示了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>float_demo</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.container{
				width: 1200px;
				margin: 0 auto;
			}
			.container .header{
				width: 1200px;
				background-color: #ccc;
				/*第二种清除浮动的方法*/
				overflow: hidden;  
				zoom: 1;
			}
			.header .logo{
				margin: 20px 40px;
				float: left;
			}
			.header .nav{
				float: right;
				overflow: hidden;
				zoom: 1;
			}
			.header .nav li{
				float: left;
				margin-right: 20px;
			}
			.header .nav li a{
				padding: 0 20px;
				height: 80px;
				line-height: 80px;
				display: block;
				font-family: "微软雅黑";
				font-size: 16px;
				color: #333;
			}
			.header .nav li a:hover{
				color: #fff;
			}
			.main{
				width: 1200px;
				margin: auto;
			/* 	overflow: hidden;
				zoom: 1; */
			}
			.main .content{
				width: 1000px;
				height: 500px;
				float: left;
				background-color: royalblue;
			}
			.main .sidebar{
				width: 200px;
				height: 500px;
				float: right;
				background-color: orange;
			}
			.footer{
				margin: auto;
				width: 1200px;
				height: 100px;
				background-color: #008000;
			}
			/*第一种清除浮动的方法*/
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="header">
				<div class="logo">
					<img src="../images/1.png" />
				</div>
				<ul class="nav">
					<li><a href="#">Java</a></li>
					<li><a href="#">C#</a></li>
					<li><a href="#">C++</a></li>
					<li><a href="#">Python</a></li>
					<li><a href="#">JavaScript</a></li>
				</div>
			</div>
			<div class="main">
				<div class="content">content</div>
				<div class="sidebar">sidebar</div>
			</div>
			<div class="clear"></div>
			<div class="footer"></div>
		</div>
	</body>
</html>

英雄之旅——hyc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css浮动

1.CSS float(浮动) 基础知识会使元素向左或向右移动，只能左右，不能上下浮动元素碰到包含框或另一个浮动框，浮动停止浮动元素之后的元素围绕它，之前的不受影响。浮动元素会脱离标准流2.浮动基础语法float :left; 左浮动float:right; 右浮动float:none;没有浮动3. 清除浮动在浮动元素的下面加一个空的div盒子，clear:both可...
复制链接

扫一扫

专栏目录