浮动布局
浮动属性
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>