浮动实例及清除浮动方法（面试）

最新推荐文章于 2023-03-28 18:51:44 发布

不豫

最新推荐文章于 2023-03-28 18:51:44 发布

阅读量145

点赞数

分类专栏：前端面试

本文链接：https://blog.csdn.net/qq_44912697/article/details/100863751

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

面试

1 篇文章 0 订阅

订阅专栏

浮动实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style type="text/css">
		.con,.con2{
			width: 480px;
			border:1px solid gold;
			margin: 50px auto;

		}
		.con{
			height: 80px;
		}
		.con div{
			width: 60px;
			height: 80px;
			/*float: left;*/
		}
		.box1{
			background-color: cyan;
			float: left;
		}
		.box2{
			background-color: green;
			float: right;
		}

		.con2 div{
			width: 100px;
			height: 100px;
			background-color: gold;
			margin: 20px;
			float: left;
		}
		.clearfix:after{
			content:'';
			display: table;
			clear: both;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
	<div class="con2 clearfix">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		
	</div>
	
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 400px;
			height: 40px;
			border-bottom:1px solid #ff8200;

		}
		.box h3{
			width: 80px;
			height: 40px;
			background-color: #ff8200;
			float: left;
			margin: 0px;
			font-size: 16px;
			color: white;
			text-align: center;
			line-height: 40px;
		}
		.box a{
			float: right;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div class="box">
	<h3>新闻标题</h3>
	<a href="#">更多&gt;</a>
	</div>
	
</body>
</html>

清除浮动方法

清除浮动(盒子里使用了CSSfloat浮动属性，导致父级对象盒子不能被撑开，前提是父级不给高度和使用浮动)：
1.父级增加overflow:hidden （把想要的也会隐藏）
2.在最后一个子元素后加一个空的div，给它的样式属性clear：both
3.使用成熟的清除浮动样式类，clearfix,加在父级里

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.list{
			width: 210px;
			/*height: 400px;*/
			border:1px solid #000;

			/*三步化为块*/
			margin: 50px auto;
			list-style: none;
			padding:0;
			/*1. overflow: hidden;*/
		}

		.list li{
			width: 50px;
			height: 50px;
			background-color: gold;
			margin: 10px;
			float: left;
		}
		/*3.*/
		.clearfix:after{
			content: '';
			display: table;
			clear: both;
		}
		/*解决margin-top塌陷和清除浮动问题*/
		.clearfix:before,.clearfix:after{
			content: '';
			display: table;
		}
		.clearfix:after{
			clear:both;
		}
		/*兼容ie浏览器时使用*/
		.clearfix{
			zoom:1;
		}

	</style>
</head>
<body>
	<ul class="list clearfix">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		 <div style="clear: both;"></div> 
	</ul>
</body>
</html>

不豫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动实例及清除浮动方法（面试）

浮动实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> .con,.con2{ width: 480px; border:1px ...
复制链接

扫一扫