文档流（标准流）
1、元素自上而下，自左而右 
2、块元素，独占一行，行内元素在一行上显示，碰到父级元素的边框换行
 
浮动left
浮动的框可以向左或是向右移动，直到它的边缘碰到包含框或是另个浮动框的边框为止
 
特点
设置了浮动的元素不占原来的位置（不在标准流）
可以让块级元素在一行显示
浮动可以行内元素为行内块元素
注意：转化过程尽可能用display转化
 
浮动的用途
文本绕图
<head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            img{float:left;}

        </style>

    </head>

    <body>

        <img src="练习/img/et02.png"/>

        <p>的你觉得你感觉饿了我今晚金额均为金额为金刚啊额价位u哦为</p>

        <p>的你觉得你感觉饿了我今晚金额均为金额为金刚啊额价位u哦为</p>

    </body>

属性值

 
什么时候出现清除浮动
 
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。
清除浮动不是不用浮动，是清除浮动产生的不利影响。
 
清除浮动方法
 
额外标签法
 
1、clear（属性规定元素的哪一侧不允许其他浮动元素）
       属性： left( 左边不出现浮动)  / righ t(在右侧不出现浮动元素)  /both;(左右俩侧不出现浮动)
        工作里用的最多是clear:both;
　　在最后一个浮动元素后添加标签
<style>

  outer{border:1px solid black; width:}

  .inner{width:50px; height:50px; background-color:#ff4400; float:Left;}

  .clearfix{clear:both；}

</style>

<div class="outer">

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="clearfix"></div>

</div>//这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美

2、单伪元素清除浮动（最好用）

<style>

  outer{border:1px solid black; width:}

  .inner{width:50px; height:50px;float:Left;}

  .footer{backgrtound:#005fc3;width:200px; height:50px;}

  .clearfix:after{ content:''; display:table； clear:both; height：; visibility:hidden;}//最简单的方法

  .clearfix(zoom:;)//兼容 ie 清除浮动

</style>

<div class="outer clearfix">

  <div class="inner"></div>

  <div class="inner"></div>

</div>

  <div class="footer"></div>
 
双伪元素清楚浮动（用的居多）谁出问题就给谁（父级  最时尚）
.clearfix:before, .clearfix:after{ display:table; content:"";}

.clearfix:after{ clear:both; }

.clearfix { *zoom:;}//ie浏览器

3、给父级元素加overflow:hidden属性

如果有内容出了盒子，是不能用的，因为他把内容都给隐藏了
<style>

  outer{border:1px solid black; width:； overflow:hidden; zoom:;//兼容IE}

  .inner{width:50px; height:50px; background-color:#ff4400; margin-right:20px; float:Left;}

  .footer{backgrtound:#005fc3;width:200px; height:50px;}

</style>

<div class="outer ">

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

</div>

overflow的使用

 如果内容溢出一个元素框，会发生的事

<div style="width:300px;height:300px; border:1px solid red;overflow:scroll; ">

    <p>看到你开封府发了封口费</p>

    <p>看到你开封府发了封口费</p>

    <p>看到你开封府发了封口费</p>

</div>

overflow设置滚动条

 
显示滚动条
<div style="width:260px; height:120px; overflow:scroll;"
<div style="width:260px; height:120px; overflow-y:scrll;"></div> overflow-x(左右滚动条)

css基础（浮动 清除f浮动）的更多相关文章

  1. Web前端面试指导(十九)：CSS样式-如何清除元素浮动？

    题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题 ...

  2. [转]CSS clear both清除浮动

    DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...

  3. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  4. CSS基础（float属性与清除浮动）

    3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left  |  right  |  none 特点: 浮动的元素不占位置,脱离了标准文档流 ...

  5. CSS基础必备盒模型及清除浮动

    盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  8. ife任务刷题总结（一）－css reset与清除浮动

    本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初 ...

  9. CSS 基础 例子 浮动float

    一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...

随机推荐

  1. 题解 CF670C 【Cinema】

    题目链接: https://www.luogu.org/problemnew/show/CF670C 思路: step-1: 语言的数据范围是10^9,所以我们采取用map离散化,这样就能方便且不ML ...

  2. Update导致SQL Server死锁的典型方法（转载）

    此文为转载文章,描述的很好,没有验证过. 最近遇到了一个看上去很奇怪,分析起来很有意思的死锁问题.这个死锁看上去难以理解.而分析过程中,又使用了很多分析SQL Server死锁的典型方法.记录下来整个 ...

  3. Centos7:nginx的安装,配置及使用

    安装依赖 yum install gcc-c++//gcc环境 yum install -y pcre pcre-devel//PCRE:nginx的http模块使用pcre来解析正则表达式 yum ...

  4. Caffe Blob测试

    本例子来源于<21天实战Caffe> 代码如下: #include <vector> #include <iostream> #include <caffe/ ...

  5. Mybatis和hibernate的优缺点比较

    介绍: Hibernate :Hibernate 是当前最流行的ORM框架,对数据库结构提供了较为完整的封装. Mybatis:Mybatis同样也是非常流行的ORM框架,主要着力点在于POJO 与S ...

  6. java_day11_IO流

    第十一章:IO流 1.流的概念 流是个抽象的概念,是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以"流"的方式进行.设备可以是文件,网络,内存等 流具有方向性 ...

  7. SpringBoot static修饰的字段/方法如何获取application.yml配置

    SpringBoot的application.yml一种特殊的应用场景,一般我们获取application.yml的配置文件只要@Value就可以获取到值了,但是如果是static修饰的字段肯定就不能 ...

  8. 【转】Linux设置和查看环境变量的方法

    转: http://www.jb51.net/LINUXjishu/77524.html 1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量 ...

  9. Ubuntu .tar.xz文件解压缩命令

    1.解压缩.tar.xz文件 这是两层压缩,外面是xz压缩方式,里层是tar压缩 所以可以分两步实现解压 $ xz -d filename.tar.xz $ tar -xvf filename.tar ...

  10. PAT 1003.我要通过1

    答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: ...