0

0

div+css的浮动常出现的问题以及解决办法_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:29:38

|

1445人浏览过

|

来源于php中文网

原创

    今天终于有空写篇文章了,如果有不对的还请大家多多指正,只是想让初学者少走点弯路,当初我学的时候到处碰壁,一些很简单的问题如题“div+css的浮动”被一些牛x人物写的多么的深奥,我理解半天才弄懂原来是围绕一个属性把那个标签的祖宗十八代都给牵扯出来了!不说了....

    首先,你肯定为一名网页构架师或者将要成为一名构架师,说实话现在的这个行业我却不怎么看好,因为现在做这个的太多了,谁让它叫IT呢?做的多就贬值了!呵呵,发个牢骚,现在我们切入正题!

    1.float的在IE6中出现的一些BUG问题

    当使用float在网页中布局的时候会出现一些让我们难以理解甚至不敢置信的一些问题,例如:在IE6里面会出现右侧3PX的空白,这时其他浏览器都是非常标准,我们理所当然的认为是IE6比较落后现在没几个人会在意,但是作为一个设计师,你必须为你的作品负责,这个问题其实解决很简单,这里我们需要使用一些HACK技术,在你的css中加上一个如:.box{margin-right:0px; margin-right:-3px!important;}这样就ok了!如果不了解HACK技术的,可以在网上查,很多的哦!

    2.float浮动混乱布局div+css的浮动

立即学习前端免费学习笔记(深入)”;

    最常见的问题就是,当你把上面两个块使用了float浮动属性后,下面的块会出现在上面的右侧,这个问题在设计的时候很头疼,也是很多初学者最搞不懂的。现在这个其实也很简单,使用clear这个元素的清除属性,就是在以上的两个div下面写上一个容器如:

#bb{float:left;width:480px;}

#aa{width:960px; margin-top:5px;}

#clear{clear:both;}

 


 ......
 


 ......

.....

如此即可解决这个老大难的问题。

    3.float浮动出现双间距

Pixso AI
Pixso AI

Pixso AI是一款智能生成设计稿工具,通过AI一键实现文本输入到设计稿生成。

下载

    当li使用float属性后会出现两倍的间距即当你设置li的左边距为3PX但是它会出现6PX的左侧空白,这个其实只需要在li元素的css上面设置一个内联属性即:display:inline即可解决。

    4.当未知高度的子元素进行float浮动时,让父元素自适应高度

    可在父元素中的末端加上

.....
即可如:

#oo{ margin:0 auto;width:960px;}

#bb{float:left;width:480px;}

#aa{width:960px; margin-top:5px;}

#clear{clear:both;}

 


 ......
 


 ......

.....

,如果让子元素也自适应高度的话同上。

这是我现在就遇见的div+css的浮动常出现的问题与解决方法,如果有不对的地方,还请大家予以指正,欢迎大家一起探讨

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP自制框架
PHP自制框架

共8课时 | 0.6万人学习

PHP面向对象基础课程(更新中)
PHP面向对象基础课程(更新中)

共12课时 | 0.7万人学习

Go 中文开发手册
Go 中文开发手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号