文档流（标准流）
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. 服务端相关知识学习（二）之Zookeeper可以干什么

    Zookeeper主要可以干哪些事情 配置管理,名字服务,提供分布式同步以及集群管理.那这些服务又到底是什么呢?我们为什么需要这样的服务?我们又为什么要使用Zookeeper来实现呢,使用Zookee ...

  2. 汉明码(hamming code)

    hamming code用于磁盘RAID 2中, 关于汉明码的讲解可以看这篇博文,介绍的很详细.最重要是最后的结论: 汉明码属于分组奇偶校验,P4P2P1=000,说明接收方生成的校验位和收到的校验位 ...

  3. LeetCode：181.超过经理收入的员工

    题目链接:https://leetcode-cn.com/problems/employees-earning-more-than-their-managers/ 题目 Employee 表包含所有员 ...

  4. 【科创人上海行】Tinyfool郝培强 ：始于不惑的微服务式创业，背负身心病痛贴地飞行

    Intro 科创人,分享技术创业者的成长与创业经验. 何谓创业?勇于面对未知.肩负重任的人生抉择. 何谓经验?沟沟坎坎.有笑有泪,各有其宝贵. 科创人的价值支点是"人",我们不以市 ...

  5. Docker 备忘

    C/S架构: 客户端发出命令给服务器端(内含守护进程),守护进程执行命令后将结果传回给客户端.(可以远程访问,可以本地访问) 容器内部操作: 可写层下面都是只读的,操作时需要什么文件会被复制到可写层, ...

  6. maven入门-- part3 生命周期

    简介: Maven有三套相互独立的生命周期,请注意这里说的是“三套”,而且“相互独立”,这三套生命周期分别是: Clean Lifecycle 在进行真正的构建之前进行一些清理工作. Default ...

  7. Redis总结2

    一.Redis效率高的原因 众所周知,Redis常用来做缓存,从而提高项目QPS(每秒查询率).QPS = 并发量 / 平均响应时间 然而其效率高的原因包含但不仅限于如下几点: 1.Redis基于内存 ...

  8. Django REST Framework(DRF)_第四篇

    DRF分页(总共三种) PageNumberPagination(指定第n页,每页显示n条数据) 说明 既然要用人家的那么我们就先来看下源码,这个分页类源码中举例通过参数指定第几页和每页显示的数据:h ...

  9. Google Chrome Keyboard Shortcuts

    Navigation To do this Press this Open a new window Ctrl + N Open a new tab Ctrl + T Open a new windo ...

  10. CSS基础学习-12.CSS position

    绝对定位 position:absolute,元素脱离文档流,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...