2 sinat 28220307 sinat_28220307 于 2016.02.18 21:37 提问

HTML关于CSS+DIV浮动的一个疑问
 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<style>
    #div1 {
        width:400px;
        height:300px;
        background-color:pink;
    }
    #div2 {
        width:150px;
        height:100px;
        background-color:green;
        float : left;
    }   
    #div3 {
        width:250px;
        height:150px;
        background-color:orange;
    }
    #div4 {
        width:180px;
        height:130px;
        background-color:blue;

    }       
</style>
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
        <div id="div3">

        <!--    <div id="div4"></div> -->

            <a href="#">链接</a>
        </div>
    </div>

</body>
</html>

当div2浮动的时候,div3 就跑到div2下面,因为div2脱离文档流了不占空间,这个我能理解,但是为什么 div3里面的 a标签却不会跑到div2下面呢?然后div3里面注释的div4却会连同div3一起跑到div2下面? 请高手解答,万分感谢!

2个回答

bogexueqianduan
bogexueqianduan   2016.02.21 22:08
已采纳

首先第一个问题,a标签为什么会环绕,起初float设计出来就是为了达到,文字环绕。只是后来被用来布局了。所以float有个特性就是文字(或者内联元素这个不确定)会环绕float的元素。第二个问题你说的div4是个注释,页面不会显示,不清楚你讲的跑到div2下面是什么意思,我的chrome里没有显示出div4的内容的

sinat_28220307
sinat_28220307 我试了下,果然文字和常用的那几个内联元素会环绕!谢谢
2 年多之前 回复
devmiao
devmiao   Ds   Rxr 2016.02.18 21:51
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
html css控制浮动元素居中显示
基本的html结构: <div> <!-- <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> --> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> </div>欲实现效果: 浮动元素居中的出现
DIV+CSS关于浮动跑到上面的原因
今天,遇到了一个问题就是div地底部莫名其妙的跑到上面去了。 无标题文档 body{ text-align:center;} .top{ width:960px; height:100px; background-color:#003300; margin:0 auto;} .main{ margin:0 auto; width:960px;} .a{ float:left;
三个div,一个左浮动,一个右浮动,另外一个不浮动引发的样式问题
在设计页面时,我们经常遇到这种情况,一个div设置了左浮动,另一个div设置了右浮动,而因为浮动起来后,这两个div就不占据页面空间了,所以后面的div,就会显示在这两个div的下面,就像这种情况 这可不是我们想要的!解决办法就是给 黄色的div添加一个属性divYellow:display:inline-block;这样他们都变成了行内块级元素了,效果就变成了我们想要的了 ...
如何控制CSS使一个div位于最上层
Z-index属性决定了一个HTML元素的层叠级别。 元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言。 一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。 这个层叠顺序沿着垂直的线轴被呈现。 显然,只能通过代码改变层级,这个属性就是z-index。 要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或
固定-浮动定位在顶部的div
固定-浮动定位在顶部的div 固定-浮动定位在顶部的div *{ margin:0; padding: 0; } #container{ width: 90%; background: #ccc; height:auto; margin: 0 auto; } #nav{ position:fixed; top:0; width:90%; height:
DIV+CSS区块框浮动设计
在页面布局的时候,可以用绝对定位来实现,但是由于调整某个区块框时其他区块的位置不会相应的改变,所以这并不是布局的首选方式。但是使用浮动的区块框可以向左或向右移动,直到它的外边缘碰到包含它区块的边框或另一个浮动狂的边框为止。并且由于浮动框不在文档的普通流中,所以文档的普通流中的区块框表现的像就浮动框不存在一样。 这篇文章就总结几种简单的区块框浮动的例子: 1.不浮动区块框排序 D
html中div的浮动问题
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如:标签盒子、标签、标签、标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。 float是什么意思? float是浮动,翻译成中文也是浮动意
DIV放在最顶层或覆盖层的技巧(很实用呀)
z-index:auto这个 属性 -1为最下面的层,越大越在上面:9999 如果是视频或flash,可以把其他的设为wmode设置成transparen!
html两个div浮动后下一个div怎么换行的问题
刚开始学习网页前端,不懂得问题挺多,总在网上查找相关知识点,但是东西一旦多了就特别难记全了,今天又查东西突然发现别人都是查完以后把东西写一遍文章记下来方便自己也方便后来的新人所以写了这篇稿子,当然大多数都还是从网上跟一些前辈学的,算不上原创,只能说是总结一下自己要用的和前辈留下的一些知识,方便把这些知识为我所用。 以下内容如有冒犯哪位前辈或者原创,还请多多包涵,也可以联系我删除,绝对尊重
div 相对于浮动层定位,不占位
.kk1{ float:left; position:relative; widht:100px; border:0;}.kk2{ position:absolute; top:20px; left:20px;} 好好学习,         文字内容自己编辑  天天向上.因为class=kk2的层不占位所以显示时这一行紧跟着"天天向上"