慕课网学习笔记----《网页布局基础》—浮动布局和float属性
来源:互联网 发布:酷家乐是软件吗 编辑:程序博客网 时间:2024/04/29 06:58
浮动布局
<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>
0 0
- 慕课网学习笔记----《网页布局基础》—浮动布局和float属性
- 慕课网学习笔记----《网页布局基础》—绝对定位布局
- 【慕课网】网页布局基础学习笔记
- 慕课网学习笔记----《网页布局基础》------自动居中-列布局
- 慕课网学习笔记----《网页布局基础》—横向两列布局
- 网页布局基础的学习笔记
- 慕课:网页布局基础课程——学习笔记
- CSS学习笔记8:实操——运用浮动简单布局网页
- DIV CSS布局:CSS浮动float属性详解
- 栋栋晓06:详解css布局中的浮动float属性
- css布局float浮动布局详解
- 网页布局基础(慕课网笔记整理)
- 写给后端的前端笔记:浮动(float)布局
- float和clear都是布局的属性
- 横向布局中浮动float和inline-block的使用
- float浮动布局,auto冻结布局,position:absolute绝对布局
- float浮动布局,auto冻结布局,position:absolute绝对布局
- div+css网页布局教程(1):float属性介绍
- Android手机摄像头拍照行为如何被自己的app自动捕获?
- 性能监控工具:application vantage 和 Lab128
- Linux下的粘滞位
- HTML学习(III)
- maven打包跳过测试环节
- 慕课网学习笔记----《网页布局基础》—浮动布局和float属性
- 计算机文化基础—计算机软件
- <title>标签
- js 函数中如何传递数组参数
- 新三板是什么概念
- ASIHttprequest 在自定义类中不执行回调函数
- eclipse中WEB-INF不显示classes文件夹解决方法
- 数据读取问题。导师们快来
- PAT--1128. N Queens Puzzle