慕课网学习笔记----《网页布局基础》—浮动布局和float属性
2017-03-25 18:08
471 查看
浮动布局
<html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> .box1{ height:50px; background-color:red; } .box2{ height:50px; background-color:blue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
以上为两个基本的div
此时给box1加一个向左浮动:
.box1{ height:50px; background-color:red; float:left; }
此时结果如下图:
此时,红色box1不见了
原因:box1里面没有内容,且没有设置宽度,当设置浮动时,尺寸得不到扩展,会缩成一个小圆点,出现在浏览器左上角。
这时候我们给box1填充内容,再来看看效果
<div class="box1">这里是box1,哈哈哈哈哈哈哈</div>
当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。
清除浮动
当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素,所以有时需要用到清除浮动的方法。例如. 给box2填充内容:
<div class="box2">这里是box2,哈哈哈哈哈哈哈</div>
给box2增添一句向左浮动的代码:
.box2{ height:50px; background-color:blue; float:left; }
此时效果如下图:
在box2的div后增添一个p标签,填充内容:
<p>这里是box2后面的一个段落,紧邻在box2后面,是box2的相邻元素</p>
此时效果如下图:
此时因为p元素为box2的相邻元素,由于box2向左浮动,故对p元素产生了影响。所以现在需要清除浮动,达到p元素在box2下面,独占一行的效果。
清除浮动的方法:
给需要清除浮动的元素增添属性值:clear:left;/right;/both;
即为不允许左侧/右侧/两边有浮动对象。
注意:这个规则只能影响使用清除的元素本身,不能影响其他元素。
同时设置
1).width:100%;(或固定宽度)
2).overflow:hidden;
此时来试试清除浮动的方法
1).给p元素增添属性值,达到清除浮动的目的:
p{ clear:left; }
使用clear:left;指定p元素左边不出现浮动元素,这样p元素被迫下移一行
效果如下图:
2).第二种方法也能达到和第一种方法一样的效果,如上图所示。
p{ width:100%; overflow:hidden; }
现在我将所有的代码全部贴上来:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.box1{ height:50px; background-color:red; float:left; }
.box2{
height:50px;
background-color:blue;
float:left;
}
p{
clear:left; /*清除浮动方法一*/
/*width:100%;
overflow:hidden;*//*清除浮动方法二*/
}
</style>
</head>
<body>
<div class="box1">这里是box1,哈哈哈哈哈哈哈</div>
<div class="box2">这里是box2,哈哈哈哈哈哈哈</div>
<p>这里是box2后面的一个段落,紧邻在box2后面,是box2的相邻元素</p>
</body>
</html>
相关文章推荐
- 慕课网学习笔记----《网页布局基础》------自动居中-列布局
- 慕课网学习笔记----《网页布局基础》—横向两列布局
- 慕课网学习笔记----《网页布局基础》—绝对定位布局
- 学习笔记:iOS布局库—MyLayout库之浮动布局MyFloatLayout
- CSS布局浮动(float)和定位(position)属性的区别和使用
- 栋栋晓06:详解css布局中的浮动float属性
- 写给后端的前端笔记:浮动(float)布局
- CSS学习笔记(6)--浮动,三列布局,高度宽度自适应
- css布局学习笔记之position属性
- [android](学习笔记2)深入xml布局属性
- android 开发零起步学习笔记(十八):Android Layout 布局属性全解
- CSS学习笔记:横向两列布局(float、margin)
- 【慕课网】网页布局基础学习笔记
- 慕课网《如何用CSS进行网页布局》视频学习笔记
- CSS——灵活布局 float (浮动属性)
- CSS布局最常用属性float(浮动)和position(定位)
- CSS布局最常用属性float(浮动)和position(定位)
- CSS学习笔记8:实操——运用浮动简单布局网页
- HTML网页开发 燕十八 第6课学习笔记-浮动布局
- 黑马程序员------学习笔记(9)android五种布局及布局属性