CSS布局之浮动-4

发布时间：2024-02-22 13:00

网页布局的核心——用CSS来摆放盒子。

CSS布局的三种机制：

普通流（标准流）

【块级元素】
独占一行，自上而下顺序排列
常用元素：div hr p h1~h6 ul ol dl form table

【行内元素】
按照顺序，从左向右顺序排列，碰到父元素边缘则会自动换行
常用元素：span a i em 等

浮动

【什么是浮动？】
概念：元素的浮动是指设置了浮动属性的元素会
1.脱离标准普通流的控制
2.移动到指定位置。

【作用】：
1.让多个盒子（div）水平排列成一行
2.可以实现盒子的左右对齐
3.浮动最早是用来控制图片，实现文字环绕图片的效果。

【语法】

选择器 { float : 属性值; }

属性	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

1）浮动口诀之浮

漂离在标准流之上，脱离标准流。俗称“脱标”


<html>
<head>
	<title>浮动口诀title>
	<style>

		.one{
			/*不再是标准流了，脱离标准流，浮动在其他盒子的上方*/
			float: left;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.two{
			width: 300px;
			height: 300px;
			background-color: purple;
		}

	style>
head>
<body>
	<div class="one">div>
	<div class="two">div>
body>
html>

【代码结果如下】

2）浮动口诀之漏
漏：浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，而是漂浮在上面。

3）浮动口诀之特
浮动—特性：任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是和中元素，生成的块级框和我们前面的行内块极其相似，（行内块之间两个盒子之间有间隙），但是通过浮动设置出来的两个盒子之间没有任何间隙。

/*div 添加浮动之后，仍然是块级元素，默认相当于转换成了 inline-block*/
		div{
			float: left;
			height: 100px;
			background-color: pink;
		}

/*对两个div 盒子设置，两个盒子都进行浮动，两个盒子会形成行内块元素的形式，并列排放，且两个盒子之间没有间隙*/
	.one,
		.two {
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		.one{
			float:left ;
		}
		.two {
			background-color: purple;
			float: left;
		}

【结果如下】

两个盒子一左一右放置的代码：

.one,
		.two {
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		/*左浮动*/
		.one{
			float: left;
		}
		/*右浮动*/
		.two {
			background-color: purple;
			float: right;
		}

【结果如下】

浮动小结

特点	说明
浮	加了浮动的盒子是浮起来的，浮在其他标准流盒子之上
漏	加了浮动的盒子是不占位置的，原来的位置漏给了标准流的盒子
特	特别注意：浮动元素会改变display的属性，类似转换成了行内块，但是元素之间没有空白缝隙

浮动的应用

浮动和标准流的父盒子搭配

因为浮动是脱标的，会影响下面的标准流元素，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准的影响。

一个完整的网页：标准流 + 浮动 + 定位一起形成的。

案例：小米网站首页


<html>
<head>
	<title>小米title>
	<style >
		*{
			margin:0px;
			padding:0px;
		}
		li {
			list-style: none;
		}
		/*最大的盒子*/
		.box{
			width: 1226px;
			height: 615px;
			background-color: transparent;
			/*盒子摆放在最中间*/
			margin:auto auto;
		}
		/*左侧盒子*/
		.left{
			width: 234px;
			height: 615px;
			background-color: purple;
			/*浮动的形式*/
			float: left;
		}
		/*插入的左侧图片 和左侧盒子的宽度相同*/
		.left img{
			width: 100%
		}
		/*右侧盒子*/
		.right{
			width: 992px;
			height: 615px;
			background-color:transparent;
			/*浮动的形式，一左一右*/
			float: right;
		}
		/*右侧盒子内部的每一行*/
	    .right li{
	    	float:left;
	    	width: 234px;
	    	height: 300px;
	    	background-color: green;
	    	margin-left: 14px;
	    	/*下方有空隙*/
	    	margin-bottom: 14px;  	
		}

	style>
head>

<body>
	<div class="box">
		<div class="left" ><img src="images/mi.jpg">div>
		
		<ul class="right">
			<li><img src="images/mi.png">li>
			<li>2li>
			<li>3li>
			<li>4li>
			<li>5li>
			<li>6li>
			<li>7li>
			<li>8li>
		ul>
	div>
body>
html>

【结果如下：】

案例2：导航栏
实际重要的导航栏中，我们不会直接用链接 a 而是用 li 包含链接（li + a ）的做法


<html>
<head>
	<title>导航栏title>
	<style >
		*{
			margin:0px;
			padding: 0px;
		}
		li{
			list-style: none;
		}
		.banner{
			width: 760px;
			height: 150px;
			/*background-color: red;*/
			margin:auto;
			
		}
		.bottom{
			width: 760px;
			height: 32px;
			/*line-height: 32px;*/
			/*background-color: blue;*/
			margin:0 auto;
			background: url(images/nav_bg.jpg) repeat-x;
		}

		.bottom ul li {
			/*因为li让文字竖着显示，所以需要给li加浮动*/
			float: left;
			
			
			
		}
		.bottom ul li a {
			display: inline-block;
			text-decoration: none;
			
			/*color: black;*/
			width: 80px ;
			height: 32px;
			text-align: center;
			line-height: 32px;
			background:url(images/button1.jpg) no-repeat;
			font-size: 12px;
			
		}
		/*鼠标经过时会有一个框框显示，所以要给a标签加背景图片，还要对a 设置行高、宽度*/
		.bottom ul li a:hover{
			color: white;
			background:url(images/button2.jpg) no-repeat;
		}

	style>
head>
<body>
	
	<div class="banner"><img src="images/banner.jpg">div>
	<div class="bottom">
		<ul>
			<li><a href="#">网站首页a>li>
			<li><a href="#">网站首页a>li>
			<li><a href="#">网站首页a>li>
			<li><a href="#">网站首页a>li>
			<li><a href="#">网站首页a>li>
			<li><a href="#">网站首页a>li>
			
		ul>
	div>
body>
html>

【结果如下：】

浮动的扩展

1）浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距
2）浮动元素和兄弟之间的关系
【建议】：

如果一个盒子里面有多个盒子，如果其中一个浮动了，那么其他兄弟也应该浮动，防止引起问题。

清除浮动

1）为什么要清除浮动？
因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
2）清除浮动的本质
清除浮动主要是为了解决父级元素是因为子级元素浮动引起内部高度为0的问题，清除浮动之后，浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
3）清除浮动的方法

语法
选择器 { clear : 属性值；} clear 清除

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

基本上只使用clear: both；

【方法1：额外标签法】

在浮动元素末尾添加一个空的标签。
例如：

代码：


<html>
<head>
	<title>浮动盒子title>
	<style >
		.one{
			
			width: 500px;
			border:5px red solid;
			/*padding: 100px;*/
		}
		.da{
			float: left;
			width: 100px;
			height: 100px;
			background-color: purple;
			
		}
		.er {
			float: left;
			width: 200px;
			height: 200px;
			background-color: green;
		}
		/*清除浮动*/
		.clear{
			clear: both;
		}
		/*与 one 并列的盒子*/
		.two{
			width: 500px;
			height: 200px;
			background-color: black;
		}
	style>
head>
<body>
	<div class="one">
		<div class="da">div>
		<div class="er">div>
		<div class="clear">div>
	div>
	<div class="two">div>
body>
html>

【结果如下】：很好的清除了浮动

优点：方法简单
缺点：添加了额外的无意义的标签，不提倡使用。

【方法2：父级添加overflow属性方法】

语法：
可以给父级添加：overflow:hidden |auto |scroll都可以实现。

.one{
			
			width: 500px;
			border:5px red solid;
			/*给父级添加overflow 就可以解决问题，常用的是hidden*/
			overflow:hidden;
	}

优点：代码简洁
缺点：内容过多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

【方法3：使用after伪元素清除浮动】

/*在head中 提前声明*/
.clearfix:after {
			content:;
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}
		

<div class=" nav clearfix">

优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持after，使用 zoom:1触发 hasLayout

【方法4：使用双伪元素清除浮动】

/*在head  style 中写的*/
		.clearfix:after,
		.clearfix:before {
			content:"";
			display: table;
		}
		.clear:after{
			clear:both;
		}
		.clearfix{
			*zoom:1;
		}
 
 <div class=" nav clearfix">

4）什么时候使用清除浮动呢？

父级没有高度
子盒子浮动了
影响下面布局了，我们就需要清除浮动了

清除浮动总结

清除浮动的方式	优点	缺点
额外标签法	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级 overflow:hidden;	书写简单	溢出隐藏
父级伪元素	结构化语义正确	ie6-q不支持after，兼容性问题
父级双伪元素	结构化语义正确	ie6-q不支持after，兼容性问题

CSS布局之 浮动-4