CSS浮动(三)---Float
float内容比较多,咱们分上、下两篇来介绍,上篇已经写完,这是下篇。建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊。
1. 清除float
《上篇》中我们提到,float具有“破坏性”,它会导致父元素“坍塌”,这将不是所要看到的。如何去避免float带来的这种影响呢(也就是我们常说的“清除浮动”) ?方法有很多种,我在这里介绍4中供大家参考,大家可根据实际情况来选择。
先介绍两个比较简单,但是不常用的解决方法:
- 为父元素添加overflow:hidden
- 浮动父元素
这两个方法比较简单,在这里也就不再演示了,大家有兴趣的可以自己去试试。
第三种方法也不是很常用,但是大家要知道clear:both这个东西。通过在所有浮动元素下方添加一个clear:both的元素,可以消除float的破坏性。
接下来的第四种方法是大家最需要掌握的,也是我推荐的,也是bootstrap正在用的——clearfix——不知道的同学一定要去搜一下,要不然就太low了!
上图中,我们定义一个.clearfix类,然后对float元素的父元素应用这一样式即可,非常简单吧?注意,你可能会搜出不同版本的clearfix,有的代码比上图中的代码多,你不用理会它,就按照我的贴图的代码写就行。
究其原理,其实就是通过伪元素选择器,在div后面增加了一个clear:both的元素,跟第三种方法是一个道理。
2. 合理的使用float布局网页
《上篇》中提到,我们使用float做网页布局,是一种误解和“误用”。估计大多数人误解了float的原本设计初衷,但是这里的“误用”是要加引号的,因为这是一种无心插柳的应用。即,用float做网页布局是很合情合理的,鼓励同志们继续使用。
但是用float做网页布局也是有许多技巧的,准确的应用会提高网页的灵活性。下面我列举两个常用的网页布局案例,仅供大家参考,不喜勿喷,善意留言!
第一,三列布局
博客园的主页就是经典的三列布局,很明显的左、中、右。
对于这种布局,我给出的布局方案是:
第二,两列布局
以博客园一篇文章的链接为例,它分为左、右结构
对于这种布局的格式,我的设计方案是:
3. BootStrap的栅格系统
如果您熟悉并使用bootstrap,那么您将不必自己去操心网页布局,因为bootstrap已经把网页分成了12列,您可以随意设置多列布局,非常方便。这就是bootstrap的栅格系统。此处不会详解栅格系统,就是简单看看栅格系统的实现,它是用float实现的。
通过浏览器监控每个单元格的css样式,可以发现,单元格通过百分比设置了宽度,通过float:left设置了浮动。
对于父元素的清除浮动,bootstrap使用的就是《上篇》中说的clearfix,大家可以自行检测一下试试。
多看看经典软件的源码是学习的一个捷径,学习css可以看看bootstrap,学习js可以看看jquery……
4. 总结
float内容非常多,有的css书籍中,也很难全面的讲解float这一知识点的全部内容。这就需要自己去多多看书,多多实践,多多看经典系统的源码,才能做到融会贯通,举一反十。
大家共勉吧。
转载于:https://www.cnblogs.com/moxuexiaotong/p/10071303.html
CSS浮动(三)---Float相关推荐
- css中float详解,CSS浮动属性Float详解?史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
- CSS浮动(float)
一 传统网页布局的三种方式 网页布局的本质:用 CSS 来摆放盒子,把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说就是盒子如何进行排列). 普通流(标准流) 浮动 定位 这里指的只是传 ...
- CSS——浮动(float)
一.float的概念:通过浮动可以使一个元素向其父元素的左侧或右侧移动 二.float 可选值: -float:none:默认值,无浮动效果 -float:left:向左浮动 -float:right ...
- CSS浮动(Float)(二)
1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相当于浮动起来 ...
- CSS浮动属性Float到底什么怎么回事,下面详细解释一下
float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局 ...
- CSS浮动(二)---Float
重新认识float 2.1. 误解和"误用" 既然提到"误用",各位看官就此想想,自己平日是怎么使用float的?另外,既然"误用"加 ...
- CSS 浮动(float)
文章目录 什么是 CSS Float(浮动)? 属性 特点 浮动的规则 浮动的问题 案例---导航练习 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其 ...
- CSS 浮动(float)
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 元素怎样浮动 元素的水平方向浮动,意味着元素只能左右 ...
- CSS清除浮动(float)的三种方式
标题CSS清除浮动(float)的三种方式 为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在画面上.我们一般布局都是只设置宽度不设置高度,让内容来填充高度.但利用浮动后会让原本填充的高度消失 ...
最新文章
- Golang 新手可能会踩的 50 个坑
- C#——继承[模拟Server类]初始化过程顺序DMEO
- 数据库慢,原来与数据库无关
- 基于java Springboot+Vue+shiro前后端分离疫情防疫管理系统设计和实现2.0
- 系统提升架构能力之10种mysql主从实践总结
- 在Linux上安装JDK9
- mysql-5.6.31.tar.gz_MySQL5.6.31源码安装
- Spring框架第一天
- 《项目百态:软件项目管理面面观》三模式总结
- php 查找所有函数,PHP(方法 函数 循环 和 数组 查找)
- 华为RH2288v3服务器安装ESXI 6.7U3(转载)
- Delphi在代码编辑栏按回车无法换行
- [Python] 中英文标点转换
- TortoiseSVN安装中文语言包
- delphi查看源码版本_Eigen 版本切换(ubuntu 16.04)
- 防勒索病毒的个人解析
- c#读取mysql返回的值类型_C#中Mysql读取字段值
- OFD文件免费转PDF
- vs2015 :“64位调试操作花费的时间比预期要长“,无法运行调试解决办法
- vue3 render函数的写法
热门文章
- 复制字符串小程序笔记
- 【译】Thoughts and Goals on Qtum's x86 VM
- How to Visualize Your Recurrent Neural Network with Attention in Keras
- JNI实现源码分析【四 函数调用】
- TensorFlow 实战 MINST
- JZOJ 1321. 灯
- MySQL删除s表命令_SQLServer数据库sql语句中----删除表数据drop、truncate和delete的用法...
- An Algorithm Summary of Programming Collective Intelligence
- 卓越性能代码_「Win」被隐藏起来的卓越性能模式,为何不想让人发现?
- 遇到 ORACLE 错误 1115,ORA-01114、ORA-27067错误案例一则