《网页布局基础篇》—浮动布局和float属性
2024-09-05 03:13:31
浮动布局
<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>
- 1
当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。
清除浮动
当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素,所以有时需要用到清除浮动的方法。
例如. 给box2填充内容:
<div class="box2">这里是box2,哈哈哈哈哈哈哈</div>
- 1
给box2增添一句向左浮动的代码:
.box2{
height:50px;
background-color:blue;
float:left;
}
此时效果如下图:
在box2的div后增添一个p标签,填充内容:
<p>这里是box2后面的一个段落,紧邻在box2后面,是box2的相邻元素</p>
- 1
此时效果如下图:
此时因为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;
}
- 1
- 2
- 3
- 4
现在我将所有的代码全部贴上来:
<!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>
最新文章
- 北大poj-1081
- AP6181 正基 WIFI 模块
- POJ3659 Cell Phone Network(树上最小支配集:树型DP)
- [CoffeeScript] Level 4 Arrays, Objects, Iterations -- Ex
- apache2.2 虚拟主机配置
- Android进阶笔记12:Manymo(在线安卓系统模拟器工具)
- Spring – Sending E-Mail Via Gmail SMTP Server With MailSender--reference
- day2练习题
- Redis源码阅读笔记(2)——字典(Map)实现原理
- Oracle sga、pga介绍改动
- POJ 1698 (二分图的多重匹配)
- c# 逆波兰式实现计算器
- Python常用的第三方库
- STL中关于map和set的四个问题?
- Windows Powershell脚本执行
- 谈谈自己的理解:python中闭包,闭包的实质
- Android简易实战教程--第六话《开发一键锁屏应用2&#183;完成》
- 微信小程序调用高德地图
- python-进程之间通信、多线程介绍
- 使用Dockerfile制作JDK+tomcat镜像