在css中,浮动问题可能是很多刚入门的小白比较头疼的问题。

1,首先先来介绍一下两种浮动类型:左浮动和右浮动

  1) float:left;左浮动,后面的内容会流向对象的右侧

  2) float:right; 右浮动,后面的内容会流向对象的左侧

  举例来说,三个块级元素,第一个设置浮动后,第一个块级元素将不再占用块级位置,第二个将会取代第一个的位置

2,由于浮动会使浮动对象后面的布局错乱,因此引入了清除浮动: clear:both;

注意:下面是设置浮动后常见的几个问题

  (一)设置浮动后在一行的两个块级元素 会因为浏览器窗口 大小的改变 而改变其原来的位置

    解决方法:将两个块级元素放在同一个父级盒子里

  (二)当两个块级元素都设置了浮动并且设置了 margin:0 auto;(水平居中),结果并不是居中效果

    解决方法:将两个块级元素放在同一个父级盒子里

  (三)两个设置了浮动的块级元素 的 父级元素在 没有指定高度 时,将不会自动补齐高度

    解决方法1:给这两个块级元素下面增加一个空的块级标签(设置clear:both;)来消除浮动对父级元素的影响

    解决方法2:给父级元素增加 overFlow:hidden; 属性 (注意:如果子元素使用了定位布局就很难实现)

    解决方法3:利用给父级元素添加伪元素after方法 

         代码示例:

.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:;
line-height:;
content:".";
}
.clearFix{
zoom:;//解决IE6/7兼容问题
}

以上就是我给初学者总结的css浮动专题

  

  

  

  

CSS浮动专题!的更多相关文章

  1. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  2. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  3. css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  4. CSS浮动讲解好文章推荐

    经验分享:CSS浮动(float,clear)通俗讲解 http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 好文推荐!

  5. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

  6. css浮动与清除浮动

    css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...

  7. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  8. Css - 浮动布局

    Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...

  9. CSS 浮动和清除

    CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...

随机推荐

  1. 需要接入的SDK包,一定要用最新版,否则后果很严重

    ios8更新后,原来的静态库不支持.导致一个bug连续测试好多天都没结果.

  2. js页面跳转常用的几种方式

    第一种: <script language="javascript" type="text/javascript"> window.location ...

  3. laravel 简单的上传图片

     /** * laravel 简单的上传图片* @param Request $request* @return View*/public function upload(Request $reque ...

  4. ORACLE获取表信息方法

    获取表: select table_name from user_tables; //当前用户的表 select table_name from all_tables; //所有用户的表 select ...

  5. 元素类型为 "package" 的内容必须匹配 "(result-types?,interceptors?,default-interceptor-ref?

    该错误为struts.xml内配置文件节点顺序错误. package内的元素节点必须按照以下顺序排放:  result-types         interceptors         defau ...

  6. 浅谈js中的浅拷贝和深拷贝

    在js中如何把一个对象里的属性和方法复制给另一个对象呢? 下面举一个例子来说明: var person={name:'chen',age:18}; var son={sex:'男'}; functio ...

  7. iOS开发之UIPickerView

    1.使用方法 UIPickerView使用和UITableView大致类似.首先设置ViewController为数据源,然后遵守数据源协议< UIPickerViewDataRecouce&g ...

  8. IT生涯, 我的常用软件清单

    IT生涯, 我的常用软件清单 SkySeraph Jan. 26th 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.skysera ...

  9. vue简易轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. git pull错误记录及解决

    执行操作:$ git pull 返回错误: error: RPC failed; result=7, HTTP code = 0 fatal: The remote and hung up unexp ...