上课后对【css】中清除浮动的总结
来源:互联网 发布:有道云协作 mac 编辑:程序博客网 时间:2024/06/05 05:32
浮动是使脱离标准文档流的一种方法,适当的浮动可以较好的排版,但是因为浮动的元素脱标了,会影响后面的布局
<div class="father"> <div class="son"></div> </div> <p>这是一块天蓝色的区域</p>
盒子的样式
.father{border: 1px solid #000;} .son{width: 500px; height: 200px; background: #00b3ee; float: left;}
当想在浮动的区域下方添加一行文字的时候就会出现问题
1.文字没有如期望那样显示在区域下方
2.父盒子没有被撑开
那要清除这种影响就要清除浮动
现学的方法有三
①给父盒子设置高度()
加上高度
.father{border: 1px solid #000;height:100px;}
现在就正常了,但在实际开发中,网页的各个模块大小并不都是固定的,这种方法对后续的维护和拓展人员不友好
②给父盒子一个浮动
看,又加了一个浮动,可能能解决当前问题,但是无形中自己本身又是一个问题了,所以最好别用
另外貌似也解决不了前面的问题
③给父盒子一个overflow:hidden
.father{border: 1px solid #000;overflow:hidden;}
效果和方法1一样
本意是元素溢出部分,隐藏起来,而在这里起清除浮动的作用,能够撑起盒子,盒子高度由内容决定(前提盒子高度为0),可拓展性及友好性大大
增强。
暂时先写这么多,后续更新
【在学习css和html的路上,文章可能很多错误,欢迎给出建议】
阅读全文
2 0
- 上课后对【css】中清除浮动的总结
- 总结CSS中清除浮动的三种方法
- css清除浮动总结
- CSS清除浮动总结
- CSS清除浮动总结
- CSS中清除浮动的作用以及如何清除浮动
- [css] 清除浮动的方式总结
- css 清除元素的浮动方法总结
- 对css浮动的理解以及清除浮动
- css中清除浮动
- 对清除浮动方法的总结
- CSS中元素浮动的清除
- css中clearfix清除浮动的用法
- css中清除浮动的主要方法
- CSS中清除浮动的方式
- CSS中清除浮动的方式探究
- css中清除浮动的标准方法
- 浅谈css中浮动和清除浮动带来的影响
- 使用Intellij Idea打包java为可执行jar包
- 快速排序算法实现
- 两个Android端基于蓝牙通讯的demo
- Git stash命令
- Java异常处理( try catch finally throw throws exception error)
- 上课后对【css】中清除浮动的总结
- 【NOIP模拟考一】组合数学 day1 third 子集
- Leetcode 32. Longest Valid Parentheses
- loadrunner简单使用——HTTP,WebService,Socket压力测试脚本编写
- 利用模板模式封装APP版本更新模块
- html中隐藏table指定标签的列
- java 面试题汇总
- 基于Socket通信的P2P聊天
- Scheme学习系列二:调用C代码