html布局自然流加浮动,CSS浮动的使用和解决浮动的五种方法
浮动
网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的摆放盒子的方式有3种：普通流(标准流)盒子模型、浮动和定位。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
本编文章会讲到的知识点
普通流
浮动介绍
浮动的特性
浮动实现常见的布局方式
清除浮动的影响
普通流
普通流 normal flow，这个单词很多人翻译为 文档流 ，字面翻译 普通流 或者标准流都可以。
普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现意外外的情况叫做普通流布局。
浮动介绍
为什么需要浮动？
浮动的目的，就是为了更好的实现排列布局。在标准流中，也可以实现排列布局，但是存在问题，比如三个div盒子怎么横排一列？
理想效果
标准流实现代码：
div{
display: inline-block;
}
.l,.r{
width: 100px;
height: 100px;
background: gray;
}
.c{
width: 200px;
height: 100px;
background: gold;
}
标准流处理效果
浮动实现代码：
Document
div {
float: left;
}
.l,
.r {
width: 100px;
height: 100px;
background: gray;
}
.c {
width: 200px;
height: 100px;
background: gold;
}
浮动处理效果
浮动的使用方式
语法
作用
示例
float: left;
左浮动
div {float: left;}
float: right;
右浮动
div {float: right;}
浮动的特性
特点一：脱离标准文档流[普通流]
Document
.one {
width: 100px;
height: 100px;
background: blue;
float: left;
}
.two {
width: 300px;
height: 200px;
background: gold;
}
浮动元素脱离文档流
特点二：浮动找浮动
浮动找浮动(一定是多个连续浮动的盒子)。
案例中浮动2、3、4都浮动不占据位置了，脱离了文档流所以5自然就上去了和1的底部并起。
Document
.one,.five{
width: 400px;
height: 300px;
background: blue;
}
.two,.three,.four{
width: 100px;
height: 100px;
background: gold;
border:1px solid red;
float: left;
}
浮动找浮动
特点三：多个浮动的元素，以顶部基准对齐
多个浮动的元素(一定是多个连续浮动的元素),不管浮动元素的高是否相等，都以顶部基准对齐。
.one,
.five {
width: 300px;
height: 300px;
background: gold;
border: 1px solid blue;
}
.two,
.three,
.four {
width: 50px;
height: 50px;
background: red;
border: 1px solid pink;
float: left;
}
.three {
height: 100px;
width: 80px;
}
.four {
height: 20px;
width: 60px;
}
多个浮动的元素，以顶部基准对齐
浮动会改变元素的显示模式
浮动后的元素变成了行内块元素。
span {
width: 100px;
height: 100px;
border: 1px solid red;
background: gold;
/*
浮动会改变元素的显示模式，变为行内块级元素
*/
float: left;
}
aaaaaa
bbbbbb
浮动改变元素显示模式
文字环绕浮动的元素
div {
width:800px;
border:1px solid #666;
margin: 0 auto;
}
img {
width:300px;
float:right;
margin:10px;
}
你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
文字环绕浮动元素
清除浮动的影响
为什么要清除浮动的影响
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动的影响。
看下图，在蓝色盒子浮动的情况下黑色盒子会上浮，这种效果并不是我们想要的。
浮动的影响
清除浮动影响的方式
方式一：给父元素增高
缺点：在实际开发中，对于显示的内容的区域，一般情况高度不能写死，因为内容显示的数量不确定。所以对于内容区域显示的高度，应当由内容自适应。
* {
margin: 0;
padding: 0;
}
.father,
.uncle {
width: 1200px;
margin: 0 auto;
}
.father {
border: 1px solid;
height: 200px;
}
.father .son {
height: 200px;
background: blue;
border: 1px solid red;
}
.father .son1 {
width: 300px;
float: left;
}
.father .son2 {
width: 890px;
float: right;
}
.uncle {
height: 300px;
background: #000;
}
方式二：样式属性clear
内隔墙法：在父元素的内部最后一行设立一道墙(设立一个div)对所设立的墙，添加一个样式属性clear:both;外隔墙法：在父元素外部设立一道墙(设立一个div)对所设立的墙，添加一个样式属性clear:both;
缺点：每次清除浮动都要加一个标签，当一个页面清除浮动比较多时，冗余的标签也会越来越多。文件就会越来越大，传输的速度相对来说越来越慢，影响程序的性能。
* {
margin: 0;
padding: 0;
}
.father,
.uncle {
width: 1200px;
margin: 0 auto;
}
.father {
border: 1px solid;
}
.father .son {
height: 200px;
background: blue;
}
.father .son1 {
width: 300px;
float: left;
}
.father .son2 {
width: 890px;
float: right;
}
.uncle {
height: 300px;
background: #000;
}
.clearfix {
clear: both;
}
方式三：样式属性overflow:hidden;
给父元素加上一个overflow:hidden就是可以清除浮动 的影响。
缺点：这是一个偏方，虽然可以达到清除浮动的影响的效果，但是若父元素中有【定位】(后面讲)，会把溢出的部分给隐藏掉。
* {
margin:0;
padding: 0;
}
.father,.uncle {
width:1200px;
margin:0 auto;
}
.father {
border:1px solid;
/* 可以清除浮动影响的样本属性 */
overflow:hidden;
}
.father .son {
height:200px;
background:blue;
}
.father .son1 {
width:300px;
float:left;
}
.father .son2 {
width:890px;
float:right;
}
.uncle {
height:300px;
background:#000;
}
.clearfix {
clear:both;
}
方式四：:after伪元素
借助给父元素加:after伪元素实现(本质上是在模拟内隔墙法),
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {zoom: 1;} / IE6、7 专有 */
* {
margin:0;
padding: 0;
}
.father,.uncle {
width:1200px;
margin:0 auto;
}
.father {
border:1px solid;
}
.father .son {
height:200px;
background:blue;
}
.father .son1 {
width:300px;
float:left;
}
.father .son2 {
width:890px;
float:right;
}
.uncle {
height:300px;
background:#000;
}
.clearfix {
clear:both;
}
.clearfix:after {
/*
伪元素默认是行内元素
*/
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom:1;
}
方式五：使用before和after双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:block;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
* {
margin: 0;
padding: 0;
}
.father,
.uncle {
width: 1200px;
margin: 0 auto;
}
.father {
border: 1px solid;
}
.father .son {
height: 200px;
background: blue;
}
.father .son1 {
width: 300px;
float: left;
}
.father .son2 {
width: 890px;
float: right;
}
.uncle {
height: 300px;
background: #000;
}
.clearfix {
clear: both;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
解决浮动影响效果
实际工作中浮动使用还是很多的，刚开始学习的时候被浮动搞得一脸懵逼，记录下来大家一起看。
html布局自然流加浮动,CSS浮动的使用和解决浮动的五种方法相关推荐
- CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- H5清除浮动的五种方法
引言:在HTML中,如果所有子元素发生了浮动,而父元素又未设置高度,则会发生高度坍塌为0,从而影响布局,因此要清除浮动,现跟大家分享五种方法: 方法一:给父元素添加高度 ,但企业开发中 ...
- 清除浮动的五种方法及优缺点
我们首先要思考:为什么要清除浮动? 源代码: <!DOCTYPE html> <html> <head><meta charset="utf-8&q ...
- 码匠编程：CSS让元素绝对居中，你知道几种方法？
经常碰到有同学在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参考,如有不足之处,请大家补充 问题描述: 给定两个元素,这两个元素是父子级关 ...
- CSS实现水平垂直居中的五种方法
前言 今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法. 方法一:margin:auto 子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种 ...
- css如何设置透明度？设置透明度的两种方法（代码实例）
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
- dw中css怎么设置段落格式,Dreamweaver文本段落缩进的五种方法
一.用自Dreaweave身所带的功能 1.在Dreamweaver中执行下面操作4次就可以插入两个汉字大小的空格. 2.用同背景色相同颜色的字符来完成插入空格,这种方法操作比较繁琐.不易修改,而且在 ...
- CSS清除浮动的五种方法(超详细)
1.为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在桌面上.我们一般布局的时候都是只设置宽度不设置高度,让内容来自动填充高度.但使用浮动后会让原本填充的高度消失,父元素高度为0,后续添加内容 ...
- css做三角形横线加小三角,CSS创建三角形（小三角）的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
最新文章
- r语言glmnet包系数显示不全_第一章: R语言介绍
- Python对文件的三种打开方式以及with管理上下文
- jsp传递参数的四种方法
- LeetCode 1656. 设计有序流（数组）
- c#.net多线程编程教学(2):Thread类
- Python使用Manager对象实现不同机器上的进程跨网络传输数据
- 一个小型的中文文本分类系统(项目链接文末)——《ML算法原理和实践》学习笔记
- PEmicro GDB Launch Failure : Could not bind socket.
- git、KDiff3、Git Extensions
- 湖西大学计算机专业排名,韩国留学热门的30个专业
- 用支付宝和微信可以直接跳转拉起支付，API搭建比较方便第三方支付接口首选杉德比较靠谱，
- 荣耀v20怎么变成超级计算机,我的第一次荣耀V20体验 | 荣耀V20手机里的秘密终于曝光...
- laravel-pay支付接入流程
- 自考计算机专业就业率,自考计算机专业就业前景和就业选择
- 世界最牛实验室，堪称诺贝尔奖孵化器！到底是个怎样神奇的存在？！
- 视频正在os x使用中_如何在OS X中使用家长控制来保护孩子
- 逐梦C++之四：四种强制类型转换
- bootstrap-table 添加行保留原数据
- innodb存储引擎学习总结
- Java中InputStream.close()具有什么功能呢？