文档流（标准流）
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. layer的两种提示信息

    layer.msg('您的航班价格已变动,请返回重新选择航班!', { time: 10000, shade : [0.6 , '#000' , true], btn: ['返回列表', '关闭'], ...

  2. sda.Update批量更新数据

    老方法了,重新做个记录. string connStr = ConfigurationManager.ConnectionStrings["constring"].ToString ...

  3. python之输入一系列整数输出最大值

    在python学习中,我们经常会遇到:编写一个程序,输入若干整数或者是在一串字符中,输出最大值(数)的问题.那么在这里,我给出了几种常见的,也是几种比较常用的方法,希望能给大家的学习带来一定的帮助. ...

  4. element-ui Cascader 级联选择器 点击label选中

    通过修改label的样式解决: 注意:el-cascader-panel 是直接挂载在body上的,所以需要全局设置 .el-cascader-panel .el-radio{ width: 100% ...

  5. count(*),count(1),count(字段)

    如果null参与聚集运算,则除count(*)之外其它聚集函数都忽略null. 如:    ID     DD     1      e     2    null    select  count( ...

  6. Nginx作为代理服务之正反代理

    Nginx作为代理服务之正反代理 首先什么是代理,就跟明星的经纪人类似,比如作为苍老师经纪人的我,如果你们需要和苍老师拍小电影,可以跟我这个经纪人来商量比如价格啊,时间等相关信息,那么我就作为一个代理 ...

  7. SpringBoot面试题

    详见:https://www.cnblogs.com/3xmq/p/springboot.html https://blog.csdn.net/yuzongtao/article/details/84 ...

  8. js常用骚操作总结

    打开网址 window.open("http://www.runoob.com"); 判断是否为url var url = $("#url").val(); i ...

  9. nacos 1.1.x 集群部署笔记

    Nacos 是什么? https://nacos.io/zh-cn/docs/what-is-nacos.html 服务(Service)是 Nacos 世界的一等公民.Nacos 支持几乎所有主流类 ...

  10. string::substr

    string substr (size_t pos = 0, size_t len = npos) const; #include <iostream> #include <stri ...