浮动元素之间注释，导致多复制一个文字问题

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             .wrap{
 8                 width: 400px;
 9             }
10             .left{
11                 float: left;
12             }
13             .right{
14                 width: 398px;
15                 float: right;
16             }
17         </style>
18         <!--
19             两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px
20             解决方案：
21                 1、两个浮动元素中间避免出现内联元素或者注释
22                 2、与父级宽度相差3px或以上
23         -->
24     </head>
25     <body>
26         <div class="wrap">
27             <div class="left"></div>
28             <span></span><!-- IE下文字溢出BUG -->
29             <div class="right">&darr;这是多出来的一只猪</div>
30         </div>
31     </body>
32 </html>

时间： 2024-10-05 23:01:01

浮动元素之间注释，导致多复制一个文字问题的相关文章

浮动元素的清除

浮动元素的清除: 每个浮动元素之间都是会相互影响的,从而要清除浮动元素.方法有: 1.没有高度的父亲盒子能被儿子撑出高度,但儿子成为浮动元素后,父亲盒子将不会有高度.所以给父亲元素一个高度(足够高),就能清除浮动了. 2.clear:both :给后一个选择器增加 clear:both属性 ,但此时margin(外边距)失效了(其实不是真正的失效,原因还是父盒子没有高度,当达到一定高度,会有margin) 3.隔墙法:在两个盒子之间建一堵墙(<div></div>) .cl{ cl

清除浮动——让包围元素包含浮动元素的四种方法

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 有一段代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta

[装载]float元素浮动后高度不一致导致错位的解决办方法

原文出处:float元素浮动后高度不一致导致错位的解决办方法给换行后的第一个li添加clear:left 如: ul li{float:left;width:160px;} .c{clear:left;} <li>1</li> <li>2</li> <li>3</li> <li class="c">4</li> <li>5</li> <li>6</

清理浮动的三种常用方法以及如何居中一个浮动元素

千里之行始于足下今天看到一个题目说如何居中一个float:left的元素的题目,我蛮以为用margin:0 auto 就可以解决了.然而,试验之后,发现事实并非如此,才发现自己对于这方面的知识竟是相当忙乱!于是撇下手头事务,翻书查资料温习了这部分‘简单’的内容.并总结如下. 一.清理浮动的三种方法. 当给元素设置了float属性之后,我们知道,元素便会脱离文档流的束缚,像一片水中浮动的树叶随波逐流.但是,在浮动的情况下,可能会导致网页内容出现一些我们并不想让其发生的干扰,例如其父元素的包裹作用

如何垂直居中一个浮动元素

如何垂直居中一个浮动元素 // 方法一:已知元素的高宽 #div1{ width:200px; height:200px; position: absolute; /*父元素需要相对定位*/ top: 50%; left: 50%; margin-top:-100px ; /*二分之一的height,width*/ margin-left: -100px; } //方法二:未知元素的高宽 #div1{ width: 200px; height: 200px; margin:au

如何垂直居中元素（浮动元素&居中一个<img>）？

1.如何居中一个浮动元素? 方法一:已知元素的高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 方法一:已知元素的高宽*/ #div1{ background-color:#6699FF; width:200px; height:20

IE6/IE7之浮动元素最后一个字母重复Bug

这个bug影响: IE7, IE6<div> <p> <span>A</span> <span>B</span> <span>C</span> </p> </div> div { width: 100px; } p { margin-right: 1px; } span { float: left; width: 120px; } bug出现: 1.我们有一个确定宽度的div元素. 2.

如何让一个浮动元素既水平又垂直居中

2016年3月22日让一个普通标签居中很容易,使用div {margin:0 auto}然后利用css可以自动计算元素左右的宽度就可以了 div {margin:0 auto;} 但是让一个浮动元素居中的话,却是无法通过这种形式居中的,因为浮动元素会自动跑到浮动的方向上的最边上,设置的外边框auto根本不起作用. 这时我们可以先把这个元素的位置设置为relative,这样的话就可以通过left属性来将它相对于父元素左边框的距离改为50%,当然这样还是不能实现水平居中的目标,因为元素有自己的宽度

如何居中div？如何居中一个浮动元素？

如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"> <head> <meta charset="u