浮动布局

浮动布局

浮动属性

float:

	none 	默认不浮动

	left    	左浮动

	right 	右浮动

*说明:页面出现上下布局时都用2个兄弟块元素来实现 而左右布局时 行元素因无法设置宽高这一点 无法实现我们经常想要的效果 所以有了浮动属性 浮动属性就是让 所有元素能够实现左右结构而存在 但是浮动元素也有很多不敬人意的地方。 

	如果父框未设置高度 则会出现“高度塌陷”的问题

	原因是浮动元素不占“文档流”

知识点1.网页布局概念

网页布局:使用div将网页分割为独立的部分,并使用css对这些div进行位置的摆放称为布局。
table表格布局:
     优点:布局容易、快捷、兼容性好。
     缺点:改动不便,需重新调整,工作量大。
使用div布局的好处:
1. 大大缩减页面代码,提高页面浏览速度,减少带宽成本。
2.  结构清晰,容易被搜索引擎搜索到。
3. 缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个具有成千上百个页面的站点。  
4.  强大的字体控制和排版能力。

知识点2.浮动(float)

	left
	right
	none(默认)---了解
知识点3.自动换行word-wrap
	normal:默认,无自动换行。
	break-word:在长单词或者URL地址内部进行换行。

知识点4.文字块左右分离

span元素,如果不对该元素做任何应用央视,那么span元素中的文本和其他文本不会有任何视觉上的差异,但是span元素可以将行内的文字区分成各种块,这是一种应用于行内的块结构体,可以为各种块设置其属性,例如如果使用浮动属性,行内的两个块就会分别浮动在不同的位置。

知识点5.首字下沉

使用span元素块定义文字首字母,并且该文字块左浮动,可以完成首字下沉样式,文字块不用clear样式

知识点6.水平菜单

知识点7.图文混排和文字环绕

知识点8:两侧固定,中间自适应宽度

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left,.main,.right
        {
            float: left;
            height: 20%;
        }
        .main
        {
            width: 100%;
            background-color: deepskyblue;
        }
        .left
        {
            width: 200px;
            margin-left: -100%;
            background-color: orange;
            position: relative;
            left:-200px
        }
        .right
        {
            width: 200px;
            margin-left: -200px;
            background-color: red;
            position: relative;
            right: -200px;
        }
        .con
        {
            padding:0 200px 0 200px;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="main">2</div>
        <div class="left">1</div>
        <div class="right">3</div>
    </div>
</body>
</html>
		1、外容器,里面顺序是main,left,right
		2、main,left,right都设置为左浮动
		3、设置main的宽度为100%
		4、设置left的左边距为-100%,right的左边距为负的自身宽度
		5、设置外容器的padding值留出两个侧翼的位置
		6、设置两个侧翼容器为相对定位,左侧容器left设置负的容器宽度,右侧容器设置right为负的容器宽度
		缺陷:当面板的main部分比两边的两侧容器宽度小的时候,布局会乱掉

双飞翼布局

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style type="text/css">

        #left {
            background-color: red;
            float:left;
            width:200px;
            margin-left: -100%;
        }
        #right {
            background-color: green;
            width: 200px;
            float: left;
            margin-left: -200px;
        }
        #middle {
            float: left;
            width: 100%;
        }
        #middle_content {
            background-color: blue;
            margin: 0 210px;
        }
    </style>
</head>
<body>
        <div id="middle">
            <div id="middle_content">
                middle_content<br>主内容区域
            </div>
        </div>
        <div id="left">
            left<br>左侧边栏区域
        </div>
        <div id="right">
            right<br>右侧边栏区域
        </div>
</body>
</html>
		1、外容器,里面顺序是main,left,right,main里面有一个main-content的容器
		2、main,left,right都设置为左浮动
		3、设置main的宽度为100%
		4、设置left的左边距为-100%,right的左边距为负的自身宽度
		5、设置main-content的margin左右为-200px

知识点9.清除浮动

1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。

2、边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divs
        {

            border: 1px solid #FF0000;
        }
        #div1,#div0
        {
            width: 100px;
            height: 100px;
            border: solid 1px #FF00FF;
            float: left;
        }

    </style>
</head>
<body>
<div id="divs">
    <div id="div0"></div>
    <div id="div1"></div>
</div>

</body>
</html>
clear
clear属性定义了元素的哪边不允许出现浮动元素,在CSS1和CSS2中,这是通过自动为清除元素(既设置了clear属性的元素)增加上外边距实现的。会在元素上的外边距上增加清除空间,而外边距本身并不改变,不论哪一种改变,最终结果都一样,如果声明左边或者右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界上。
		both  (重点掌握)
		 left---了解
		 right—了解
		 none—(默认值) 
清除浮动的方法

1、父级div定义height

优点:简单,代码少,容易掌握。
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题。
建议:不推荐使用,只建议高度固定的布局时使用。

BFC

创建BFC的方法:
			float的值不为none
					虽然可以开启,但是导致父元素原有高度丢失,而且也会导致下面的元素上移
			position的值不为static或者relative
			display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
					虽然可以开启,但是导致父元素原有宽度丢失
			overflow的值不为visible
						副作用最小的方式
开启后的特点:
			父容器垂直外边距不会和子元素重叠
			开启BFC的元素不会被浮动元素所覆盖
			开启BFC的元素可以包含浮动的子元素
利用BFC防止外边距折叠
			<div class="container"> 
			<p>Sibling 1</p> 
			<p>Sibling 2</p> 
			<p>Sibling 3</p>
			 </div>
			
			.container
			 {
			 background-color: red; 
			overflow: hidden; 
			 } 
			p 
			{ background-color: lightgreen;
			 margin: 10px 0;
			 }
			
			上面的样式造成了外边距合并
			
			下面是处理方法
			<div class="container">
			 <p>Sibling 1</p> 
			<p>Sibling 2</p> 
			<div class="newBFC"> 
			       <p>Sibling 3</p> 
			</div>
			 </div>
			
			.container
			 { 
			background-color: red; 
			overflow: hidden; 
			} 
			p { 
			margin: 10px 0; 
			background-color: lightgreen;
			 }
			 .newBFC { 
			overflow: hidden;
			 }

IE6不支持BFC,使用zoom:1,这是开启HasLayout模式,其它浏览器不支持
2、结尾处加空div标签clear:both

优点:简单,代码少,浏览器支持好,不容易出现怪问题。
缺点:如果页面浮动布局多,就要增加很多空div,让人感觉很不爽。
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法。

3、父级div定义overflow:hidden

原理:不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度。
				优点:简单,代码少,浏览器支持好。
				缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
				建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

4、父级div定义伪类:after

优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)。IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题 
缺点:代码多,
建议:推荐使用,建议定义公共类,以减少CSS代码。
.clearfix:after{
content: “.";
display: block;
height: 0;
visibility: hidden;
clear: both;
 }
.clearfix{zoom:1} 

知识10.浮动的坑

高度塌陷
浮动坑2-高度塌陷
<style>
/*当子类进行浮动时如果父类的div没有满足子类浮动的div的高度的话,就会出现子类溢出父类的高度塌陷*/
.box{width:500px;border:1px solid #000;}
.left{width:100px;height:100px;background:#f99;float:left;}
.right{width:100px;height:100px;background:#99f;float:right;}
</style>
</head>
<body>

<div class="box">
	<div class="left"></div>
    <div class="right"></div>
</div>
浮动元素不占文档流
浮动坑1
/*
坑1:浮动元素不占文档流
如果left的div实现了左浮动,但是由于不占用文档流所以right的div就会移动到左上角,并且left的div就会覆盖right的div;
*/
.box{width:500px;height:300px;border:1px solid #000;}
.left{width:100px;height:100px;background:#f99;float:left;}
.right{width:100px;height:100px;background:#99f;}
</style>
</head>
<body>
<div class="box">
	<div class="left"></div>
    <div class="right"></div>
</div>
</body>
浮动的毁天灭地
浮动坑2-毁天灭地
<style>
.box{width:800px;height:200px; border:1px solid #000;}
.left{width:200px;height:200px;background:#f99;float:left;}
.right{width:200px;height:200px;background:#99f;float:right;}

.box2{width:800px;height:200px; border:1px solid #000;}
.left2{width:200px;height:200px;background:#ff0;float:left;}
.right2{width:200px;height:200px;background:#0ff;float:right;}

.box3{width:800px;height:200px; border:1px solid #000;}
.left3{width:200px;height:200px;background:#00f;float:left;}
.right3{width:200px;height:200px;background:#f00;float:right;}

</style>
</head>
<body>

<div class="box">
	<div class="left"></div>
    <div class="left2"></div>
    <div class="right2"></div>
    <div class="right"></div>
</div>

<div class="box2">
	<div class="left2"></div>
    <div class="left3"></div>
    <div class="right3"></div>
    <div class="right2"></div>
</div>

<div class="box3">
	<div class="left3"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="right3"></div>
</div>

</body>
如果左边的浮动的元素,形成了高度塌陷,那么下面的div中的子元素的左浮动就会紧挨着上面溢出的浮动元素的右边;

知识11.浮动口诀

浮动口诀:

1. 一块元素浮动了 其他兄弟元素都要浮动
2. 设置完浮动后,考虑下父元素有没有“足够”的高度

浮动的奥运5环
浮动的奥运五环
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动练习-奥运五环2-正规</title>
<style>
#box{width:600px;height:600px;border:2px solid black;}
#box .box-t{height:200px;}
#box .box-t .box-t-l{width:200px;height:200px;background:red;float:left;}
#box .box-t .box-t-r{width:200px;height:200px;background:yellow;float:right;}

#box .box-c{height:200px;}
#box .box-c .box-c-c{width:200px;height:200px;background:orange;margin:0 auto;}


#box .box-b{height:200px;}
#box .box-b .box-b-l{width:200px;height:200px;background:blue;float:left;}
#box .box-b .box-b-r{width:200px;height:200px;background:green;float:right;}
</style>
</head>
<body>

<div id="box">
	<div class="box-t">
    	<div class="box-t-l"></div>
    	<div class="box-t-r"></div>
    </div>
    <div class="box-c">
    	<div class="box-c-c"></div>
    </div>
    <div class="box-b">
    	<div class="box-b-l"></div>
    	<div class="box-b-r"></div>
    </div>
</div>
</body>
</html>

知识12.浮动的特点

1
<title>浮动特1</title>
<style>
/* 浮动元素左右会贴着 如果父元素宽度不够 那么浮动的元素会往下掉 
都是右浮动的元素 浮动顺序会颠倒

*/
.box{width:500px;height:300px;border:1px solid #000;}
.left{width:100px;height:100px;background:#f99;float:right;}
.right{width:100px;height:100px;background:#99f;float:right;}
</style>
</head>
<body>

<div class="box">
	<div class="left">1</div>
    <div class="right">2</div>
    <div class="left">3</div>
    <div class="right">4</div>
    <div class="left">5</div>
    <div class="right">6</div>
    
</div>
2
浮动特2
<style>
/* 浮动元素会改变原类型的特性 全都转化为一种新的浮动特性 行元素为浮动之后可以设置宽高*/
div{width:200px;height:200px;background:#f99;text-align:center;float:left;}
span{width:200px;height:200px;background:#99f;text-align:center;float:left;}
</style>
</head>
<body>
<span>span</span>
<div>div</div>
3
<title>浮动特3</title>
<style>
/* 浮动元素无法与文本重叠 文本会被浮动往当中挤 */
.box{width:500px;height:300px;border:1px solid #000;}
.left{width:100px;height:100px;background:#f99;float:left;}
.right{width:100px;height:100px;background:#99f;}
</style>
</head>
<body>

<div class="box">
	<div class="left"></div>
    <div class="right">我内心黑暗心胸狭隘</div>
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值