文档流（标准流）
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. C#异步编程学习笔记之-async和await（续）

    书接上文,本篇主要记录的内容要点:1.针对async和await在实际应用中的使用方式:2.异步方法返回值(有返回值和无返回值)的两种情况: 示例一(无返回值): using System; usin ...

  2. 上述代码在JavaScript事件处理中

    上述代码在JavaScript事件处理中很常见,主要设置为与旧版本的Internet Explorer(主要在IE9之前)兼容,因为旧版本的IE不支持标准的W3C事件处理规范. 此代码中的e表示事件对 ...

  3. 用php连接数据库，并执行数据库操作

    1,建立与数据库之间的连接 (能通过php代码执行一个SQL语句得到查询的结果) <?php mysqli_connect(' , 'demo01'); 这里要注意两个问题: ①mysqli 是 ...

  4. C#中构建多线程应用程序[转] ----代码示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. 如何解决comctl32.dll文件丢失的问题？

    有些Win7系统用户在电脑开机时,系统会出现提示找不到comctl32.dll文件的情况,遇到这个问题我们该怎么去解决呢?好系统重装助手下面就来告诉你方法. Win7系统开机提示找不到comctl32 ...

  6. 第十一章· MHA高可用及读写分离

    一.MHA简介 1.1.作者简介 松信嘉範: MySQL/Linux专家 2001年索尼公司入职 2001年开始使用oracle 2004年开始使用MySQL 2006年9月-2010年8月MySQL ...

  7. mysql服务脚本

    #!/bin/bash #*************************** #* copyleft huihui 2015-08-11 #**************************** ...

  8. GridView 二维排布

    与ListView一维排布相对 public class MainActivity extends Activity implements AdapterView.OnItemClickListene ...

  9. 使用函数rand5()来实现函数rand7()

    题目: 给定一个函数rand5(),该函数可以随机生成1-5的整数,且生成概率一样.现要求使用该函数构造函数rand7(),使函数rand7()可以随机等概率的生成1-7的整数. 思路: 很多人的第一 ...

  10. Thymeleaf初探

    Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎.类似JSP,Velocity,FreeMaker等,它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用 ...