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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!