CSS——float浮动属性
- 流动布局
流动模型（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。
在正常情况下，HTML元素都会根据文档流来分布网页内容的。
文档流有2大特征：
① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。
② 行内元素会随着浏览器区队文档的顺序，从左往右水平分布，一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title></title>
<style>
div{ border: 1px solid #f00; margin: 4px; }
.d3{ width: 100px; }
</style>
</head>
<body>
<div>d1</div>
<div>d2</div>
<div class="d3">
<span>span1</span>
<a>a1</a>
<a>a2</a>
<span>span2</span>
</div>
</body>
</html>
- 浮动模型
要学习浮动模型的布局模式，就要了解CSS提供的浮动属性（float）。浮动属性是网页布局中最常用的属性之一，通过浮动属性不但可以很好的实现页面布局，而且还可以依靠它来制作导航栏等页面功能。
简单浮动：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>简单浮动</title>
<style> .c1{
width: 200px;
height: 200px;
background-color: indianred;
float: left;
} .c2{
width: 300px;
height: 200px;
background-color: orange;
float: left; } .c3{
width: 400px;
height: 200px;
background-color: lightblue;
float: left;
} </style>
</head>
<body> <div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div> </body>
</html>
- 字围效果
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>字围效果</title>
<style> .c1{
width: 200px;
height: 200px;
background-color: indianred; } .c2{
width: 300px;
height: 200px;
background-color: orange;
float: left; } .c3{
width: 400px;
height: 400px;
background-color: lightblue; } </style>
</head>
<body> <div class="c1">111</div>
<div class="c2">222</div>
<div class="c3">333</div>> </body>
</html>
案例：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>字围案例</title>
<meta charset="utf8">
<style> .c1{
width: 500px;
} img{
float: left;
width: 300px;
height: 200px;
} </style>
</head>
<body>
<div class="c1">
<img src="" alt="">
<span class="text">
</span>
</div> </body>
</html>
当一个元素被设置浮动后，将具有以下特性： 任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。
假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。
如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
字围效果：文字内容会围绕在浮动元素周围。
浮动元素只能浮动至左侧或者右侧。
浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。
- 清除浮动
网页布局中，最常用的布局便是浮动模型。但是浮动了以后就会破坏原有的文档流，使页面产生不必要的改动，所以我们一般在浮动了以后，达到目的了，就紧接着清除浮动。
在主流浏览器（如Firefox）下，如果没有设置height，元素的高度默认为auto，且其内容中有浮动元素时，在这种情况下元素的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的情况，叫“浮动溢出”，为了防止这个现象的出现而进行的CSS处理操作，CSS里面叫“清除浮动”。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title></title>
<meta charset="utf8">
<style> .box{
border: 1px solid red;
} .c1{
width: 200px;
height: 200px;
background-color: #336699;
float: left;
} .c2{
width: 200px;
height: 200px;
background-color: orange;
float: right;
} .footer{
width: 100%;
height: 60px;
background-color: yellowgreen; }
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="footer"></div> </body>
</html>
clear是css中专用于清除浮动的，常用的属性值有以下几个：
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>简单浮动</title>
<style> .c1{
width: 200px;
height: 200px;
background-color: indianred;
float: left;
/*float: right;*/
} .c2{
width: 300px;
height: 200px;
background-color: orange;
float: left;
clear: left;
/*clear: both;*/ } .c3{
width: 400px;
height: 200px;
background-color: lightblue;
float: left; } </style>
</head>
<body> <div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div> </body>
</html>
清除浮动解决父级塌陷问题：
.clearfix:after { /*在类名为“clearfix”的元素内最后面加入内容*/
content: "."; /*内容为“.”就是一个英文的句号而已。也可以不写。*/
display: block; /*加入的这个元素转换为块级元素。*/
clear: both; /*清除左右两边浮动。*/
visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。*/
/* visibility:hidden;仍然占据空间，只是看不到而已；*/
line-height: 0; /*行高为0；*/
height: 0; /*高度为0；*/
font-size:0; /*字体大小为0；*/
}
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
<div class="head clearfix"></div>
此外，还给父元素加上溢出隐藏属性（overflow: hidden;）来进行清除浮动。
CSS——float浮动属性的更多相关文章
- [转] CSS float 浮动属性
http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...
- CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
- 【CSS学习】--- float浮动属性
一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...
- 给li设置float浮动属性之后，无法撑开外层ul的问题。
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
- DIV CSS float浮动
一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...
- [Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。
cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...
- css float 浮动
CSS Float(浮动) 什么是 CSS Float(浮动)?大理石平台价格 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像, ...
- CSS：CSS Float(浮动)
ylbtech-CSS:CSS Float(浮动) 1.返回顶部 1. CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围 ...
随机推荐
- 学习 XSLT：XML文档转换的关键
XSL(eXtensible Stylesheet Language)是一种用于 XML 的样式语言. XSL(T) 语言 XSLT 是一种用于转换 XML 文档的语言. XPath 是一种用于在 X ...
- DevEco Device Tool 3.0 Beta2新版本发布，新增实用功能一览
DevEco Device Tool是面向智能设备开发者提供的一站式集成开发环境,支持HarmonyOS Connect/OpenHarmony的组件按需定制,支持代码编辑.编译.烧录和调试.性能监测 ...
- Gin
0x01 准备 (1)概述 定义:一个 golang 的微框架 特点:封装优雅,API 友好,源码注释明确,快速灵活,容错方便 优势: 对于 golang 而言,web 框架的依赖要远比 Python ...
- mysql 悲观锁和乐观锁（二）
前言 简单介绍一下,在mysql 优化系列中会重新介绍,仅仅是留个印象. 悲观锁和乐观锁其实都是概念性问题. 正文 悲观锁: 悲观锁,正如其名,具有强烈的独占和排他特性. 它指的是对数据被外界(包括本 ...
- WPF/C#：如何显示具有层级关系的数据
前言 比方说我们有以下两个类: public class Class { public string? Name { get; set; } public List<Student>? S ...
- 剑指offer66(Java)-构建乘积数组（中等）
题目: 给定一个数组 A[0,1,-,n-1],请构建一个数组 B[0,1,-,n-1],其中 B[i] 的值是数组 A 中除了下标 i 以外的元素的积, 即 B[i]=A[0]×A[1]×-×A[i ...
- 从零开始入门 K8s | 理解 CNI 和 CNI 插件
作者 | 溪恒 阿里巴巴高级技术专家 本文整理自<CNCF x Alibaba 云原生技术公开课>第 26 讲,点击直达课程页面. 关注"阿里巴巴云原生"公众号,回复关 ...
- Quick BI产品核心功能大图（六）开放集成
简介:企业想要拥有领先的数据分析能力,自研往往需要投入巨大的人力和财力. Quick BI作为唯一一个连续两年入选Gartner魔力象限的中国BI产品,具备强大的全链路开放集成能力,可以轻松的与企业 ...
- Java依赖冲突高效解决之道
简介:由于阿里妈妈联盟团队负责业务的特殊性,系统有庞大的对外依赖,依赖集团六七十个团队服务及N多工具组件,通过此文和大家分享一下我们积累的一些复杂依赖有效治理的经验,除了简单技术技巧的总结外,也会探 ...
- 殷浩详解DDD：领域层设计规范
简介: 在一个DDD架构设计中,领域层的设计合理性会直接影响整个架构的代码结构以及应用层.基础设施层的设计.但是领域层设计又是有挑战的任务,特别是在一个业务逻辑相对复杂应用中,每一个业务规则是应该放在 ...