CSS定位问题（2）：float 和 display 的使用_html/css_WEB-ITnose
display 属性规定元素应该生成的框的类型。
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
浏览器支持:所有主流浏览器都支持 display 属性。
注释：任何版本的 Internet Explorer （包括 IE8）都不支持"inherit"、"inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、以及 "table-row-group"属性值。
因为对块级元素设置display：inline-block的时候可以达到与float相同的效果。就是使块级元素末尾没有换行符。那么到底什么时候使用float和什么时候使用display：inline-block呢？
大多数时候float的出现是为了处理文字环绕。所以当我们为了实现文字环绕的时候使用float而处理非文字环绕的情况下，则以使用display：inline-block为主。
1.1float实现的导航条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>floatNav</title> <style type="text/css"> body, ul{margin:0;padding:0;} #body-div{ background-color:#eaebea; height:40px; /*设置当浏览器窗口变短时li换行显示*/ overflow:hidden; /*这里主要是让父级div跟据内容自动伸长*/ float:left; } ul li { list-style:none; float:left; border-right:1px solid #d2d5d2; line-height:40px; padding: 0 10px; } ul li a{ text-decoration:none; } a:link, a:visited{color:#3f3b3c;} a:hover{color:#fd687f;} </style></head><body> <div id="body-div"> <ul> <li><a href="">首页</a></li> <li><a href="">内容1</a></li> <li><a href="">内容2</a></li> <li><a href="">内容3</a></li> <li><a href="">内容4</a></li> <li><a href="">内容5</a></li> <li><a href="">内容6</a></li> <li><a href="">内容6</a></li> </ul> </div></body></html>在chrome和firefox还有IE中，显示效果如下：
1.2display：inline-block实现的导航条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>inlineNav</title> <style type="text/css"> body, ul{margin:0;padding:0;} #body-div{ background-color:#eaebea; height:40px; /*这里主要是让父级div跟据内容自动伸长*/ display:inline-block; /*设置当浏览器窗口变短时li换行显示*/ overflow:hidden; margin:0 auto; } ul li { list-style:none; display:inline-block; border-right:1px solid #d2d5d2; line-height:40px; padding:0 10px; } ul li a{ text-decoration:none; } a:link, a:visited{color:#3f3b3c;} a:hover{color:#fd687f;} </style></head><body> <div id="body-div"> <ul> <li><a href="http://www.baidu.com" target="_blank">首页</a></li> <li><a href="">内容1</a></li> <li><a href="">内容2</a></li> <li><a href="">内容3</a></li> <li><a href="">内容4</a></li> <li><a href="">内容5</a></li> <li><a href="">内容6</a></li> <li><a href="">内容7</a></li> </ul> </div></body></html>这段代码在chrome和firefox,IE(>=8)中的效果如下：
在IE(
因为IE(
关于作者：zhiqiang21
做认为对的事情，如果可能是错的，那就做认为自己承受得起的事情！ 个人主页 · 我的文章 · 3 ·
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1376
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
