《网页布局基础篇》—浮动布局和float属性
浮动布局
<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>《网页布局基础篇》—浮动布局和float属性的更多相关文章
- CSS布局 ——从display，position， float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世
https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...
- 页面标准文档流、浮动层、float属性（转）
CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...
- 【网页布局基础】css布局学习总结
三种定位机制 1.标准文档流:从上到下,从左到右输出文档内容 2.浮动 3.绝对定位 需要注意的是块级元素如div p ul 等 行级元素如span strong img input等 块级元素与行级 ...
- CSS布局 ——从display，position， float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
- 使用flex弹性布局代替传统浮动布局来为微信小程序写自适应页面
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_109 我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖 display 属性 + p ...
- 《网页布局基础篇》HTML+CSS单列布局--水平居中，垂直居中，水平垂直居中
https://blog.csdn.net/panlu666_pl/article/details/66480433 一.水平居中 子元素在父元素中水平居中 1.使用 text-align和inlin ...
- python 网页爬虫 基础篇
首先要连接自己的数据库 import pymysql import requests #需要导入模块 db = pymysql.connect('localhost', 'root', '****** ...
- （spring-第12回【IoC基础篇】）JavaBean的属性编辑器
在spring实例化bean的最后阶段,spring利用属性编辑器将配置文件中的文本配置值转换为bean属性的对应值,例如: 代码0011 <bean id="car" cl ...
随机推荐
- 网络损伤仪WANsim中关于丢包的介绍
网络损伤仪WANsim中的4种丢包模型 丢包是指在网络上传输的数据包无法到达指定目的地.丢包在广域网中是一个很常见的问题.想要模拟出真实的广域网环境,对丢包的精确模拟是必不可少的. 在网络损伤仪WAN ...
- SQlL 中 where 1=1
提升某种执行效率? 其实,1=1 是永恒成立的,意思无条件的,也就是说在SQL语句中有没有这个1=1都可以. 这个1=1常用于应用程序根据用户选择项的不同拼凑where条件时用的. 如:web界面查询 ...
- python中进程详解
1:pdb调试:基于命令行的调试工具,非常类似gnu和gdb调试,以下是常用的调试命令: 可以python -m pdb xxx.py(你的py文件名)进入命令行调试模式 命令 简写命令 作用 bea ...
- 基于MD5+RSA算法实现接口调用防扯皮级鉴权
概述 最近项目中需要对第三方开发接口调用,考虑了一下,准备采用MD5+RSA算对请求数据进行签名,来达到请求鉴权,过滤非法请求的目标. 数字签名采用MD5+RSA算法实现.RSA私钥要严格保密并提供安 ...
- 论文笔记：（2019）LDGCNN : Linked Dynamic Graph CNN-Learning on PointCloud via Linking Hierarchical Features
目录 摘要 一.引言 A．基于视图的方法 B．基于体素的方法 C．基于几何的方法 二.材料 三.方法 A．问题陈述 B．图生成 C．图特征提取 D．变换不变函数 E．LDGCNN架构 F．冻结特征提取 ...
- 王者并发课-钻石2：分而治之-如何从原理深入理解ForkJoinPool的快与慢
欢迎来到<王者并发课>,本文是该系列文章中的第25篇,砖石中的第2篇. 在上一篇文章中,我们学习了线程池ThreadPoolExecutor,它通过对任务队列和线程的有效管理实现了对并发任 ...
- Maven项目思考&实战
参考了网络上很多文章, 特此感谢. Maven项目规范 同一项目中所有模块版本保持一致 子模块统一继承父模块的版本 统一在顶层模块Pom的节中定义所有子模块的依赖版本号,子模块中添加依赖时不要添加版本 ...
- QML用同一模版多开主窗口
如何动态地创建多个长的一样的主窗口哪(数据当然不一样), 用QML也是可以实现的. 简单的地说, 就是调用多次load即可. QCoreApplication::setAttribute(Qt::AA ...
- Spring源码解析之BeanFactoryPostProcessor（三）
在上一章中笔者介绍了refresh()的<1>处是如何获取beanFactory对象,下面我们要来学习refresh()方法的<2>处是如何调用invokeBeanFactor ...
- shell脚本(14)-正则表达式
一.正则表达式介绍 正则表达式是一种文本模式匹配,包括普通字符(a...z)和特殊字符(元字符). 它是一种字符串匹配模式,可以用来检查一个字符串是否含有某种子串.将匹配的子串替换或者从某个字符串中取 ...