css基础-float浮动
float实现文字环绕图片效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
body{
font-family: '微软雅黑';
}
.per{
width: 400px;
border: 1px solid #CCC;
padding: 5px; }
.red{
width: 100px;
height: 100px;
background: red;
margin: 10px;
float:left;
}
</style>
</head>
<body>
<div class="per">
<div class="red"></div>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
</div>
</body>
</html>
清除浮动的方法一：
在浮动元素后面使用一个空元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.container{
width:500px;
border:1px solid #000;
}
.div{
width: 100px;
height:100px;
float:left;
}
.div1{
background-color:red;
}
.div2{
background-color:yellow;
}
.div3{
background-color:green;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
<div class="clear"></div>
</div>
</body>
</html>
清除浮动的方法二：
给容器添加overflow:hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.container{
width:500px;
border:1px solid #000;
overflow: hidden;
}
.div{
width: 100px;
height:100px;
float:left;
}
.div1{
background-color:red;
}
.div2{
background-color:yellow;
}
.div3{
background-color:green;
}
</style>
</head>
<body>
<div class="container">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
</div>
</body>
</html>
清除浮动的方法三：
css3的:after伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.container{
width:500px;
border:1px solid #000;
overflow: hidden;
zoom:1;
}
.div{
width: 100px;
height:100px;
float:left;
}
.div1{
background-color:red;
}
.div2{
background-color:yellow;
}
.div3{
background-color:green;
}
.clearfix:after{
content:'.';
display: block;
height:0;
visibility: hidden;
clear:both;
}
.clearfix{
zoom:1;/*兼容ie6/7*/
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
</div>
</body>
</html>
css基础-float浮动的更多相关文章
- HTML&CSS基础-清除浮动
HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...
- CSS 基础 例子 浮动float
一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...
- css之float(浮动)的特性
详解CSS float属性 float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...
- CSS清除float浮动
一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...
- CSS之float浮动
CSS理解之float浮动 首先我们看看W3C给出的关于 float 的说明: 参考资料 MDN W3C
- css基础（浮动 清除f浮动）
文档流(标准流) 1.元素自上而下,自左而右 2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行 浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框 ...
- CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- CSS基础之浮动属性float图文详解
宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”. 标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...
- html/css中float浮动的用法
一.float基础用法示例 1.我们先建两个div盒子,设置高度.宽度和背景颜色: 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就 ...
随机推荐
- 【Nginx入门系列】第四章 通过域名匹配虚拟主机,不修改端口
域名访问原理 我们在显示生活中,我们怎样通过一个域名来访问到我们所需要的网站呢? 例如www.baidu.com,我们在浏览器输入百度网址会先发送请求到DNS服务器,DNS会通过我们的域名解析百度对应 ...
- 【Nginx入门系列】第三章 通过端口号区分虚拟主机
1.配置虚拟主机 (1)连接Nginx所在的服务器(我使用的是putty) (2)切换到nginx.conf 配置文件所在的目录,我目录是/usr/local/nginx/conf (3)增加一个虚拟 ...
- LUA解析json小demo
需要修改的json数据gui-config.json { "configs": [{ "server": "JP3.ISS.TF", &qu ...
- mybaitis的延迟加载
概念:延迟加载:用到的时候才加载 因为我们在多表查询是,效率不如单表快,多个单表查询,然后使用懒加载,完成 多表关联查询 什么情况下使用懒加载 mybaitis中的表关系是一对一或者一对多的时候 我们 ...
- 微信小程序如何添加新的icon图标
第一步 先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个 压缩包,解压压缩包里面有一个css的文件复制到项目中,更改后缀为wxss 第 ...
- 【MySQL 线上 BUG 分析】之 多表同字段异常：Column ‘xxx’ in field list is ambiguous
一.生产出错! 今天早上11点左右,我在工作休息之余,撸了一下猫.突然,工作群响了,老大在里面说:APP出错了! 妈啊,这太吓人了,因为只是说了出错,但是没说错误的信息.所以我赶紧到APP上看看. 这 ...
- debian wget 报ERROR: The certificate of ‘xxx’ is not trusted.
# wget https://www.python.org/ftp/python/3.6.8/Python-3.6.8.tar.xz --2019-01-11 15:04:41-- https://w ...
- php 的file 缓存
PDO方式连接数据库类 <?php /** * @author 黄功延 * createTime 2018/5/28 0028 09:44 */ class Db { //私有化数据库连接数据, ...
- 5分钟看懂系列：HTTP缓存机制详解
原创文章首发于公众号:「码农富哥」,欢迎收藏和关注,如转载请注明出处! 什么是HTTP缓存 HTTP 缓存可以说是HTTP性能优化中简单高效的一种优化方式了,缓存是一种保存资源副本并在下次请求时直接使 ...
- vue路由--命名路由
有时我们通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 我们直接在路由下 ...