html5和css篇有关浮动以及如何清除浮动

最新推荐文章于 2024-08-22 17:01:19 发布

置顶 Kongkong_nana

最新推荐文章于 2024-08-22 17:01:19 发布

阅读量3.4k

点赞数 1

分类专栏： web开发文章标签： html css 清除浮动

本文链接：https://blog.csdn.net/NA_SAMA/article/details/50900865

版权

web开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天温习了一下写网页的骨架和血肉，html5和css，因为要备战找实习，之前看了一下各大公司笔试题，觉得虽然可以敲出来但是还是不够熟悉，而且考试内容好基础，好全面，所以每天还是记录一下。

其实大一上学期就开始接触网页的制作，但是到如今才对它有个深刻清晰的了解，所谓厚积薄发，大概可以领略一点点。

言归正传，今天主要想说一下，div层浮动的问题。

回忆一下，html的块元素主要有哪些：div ul ol p hr h1-h6 ,这是今天用到的，这些块元素都会独占一行，块元素会按照先后顺序从新的一行开始往下排，那么怎样才能让div层能在同一行呢？

拿今天的我练习的例子讲：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>湘潭大学艺术学院</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

	<div id="footer">
    <div class="foot">
        <div class="first">
            <a>链接&nbspLinks</a>

            <div>
                <ul>
                    <li>湘潭大学艺术学院OLO教学平台</li>
                    <li>湘潭大学教务管理系统</li>
                    <li>中国大学生在线</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>湘潭大学</li>
                    <li>湘潭大学图书馆</li>
                    <li>湖南省设计家协会</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>湘潭大学学生工作处</li>
                    <li>国家教育部</li>
                    <li>中国视觉联盟</li>
                </ul>
            </div>
        </div>

        <div class="second">
            <hr>
            <a>联系&nbspContact</a>
            <ul>
                <li>XTU-ART@163.com</li>
                <li>电话 +86 0730-65866245</li>
                <li>传真 +86 0731-58293856</li>
                <li>中国湖南省湘潭市雨湖区湘</li>
                <li>潭大学艺术学院</li>
            </ul>

        </div>

    </div>
</div>

</body>
</html>

css如下：

#footer{
    background-color: darkorange;
    overflow: hidden;
    clear: both;

}
.foot{
    width: 1200px;
    margin: 0 auto;


}
.foot ul{
    margin-left: 130px;
    list-style-type:none;
    float: left;
}
.second{
    clear: both;
}


.second a{
    margin-left: -350px;
}

我想要.first里的div在一行，所以对于所有的ul加了float:left，但因此就要在footer里加：clear:both和overflow，来清除浮动，紧随其后的元素也要造成影响，因为都是向左浮动，可能没有占满一行。

总结一下清除浮动的方法：

1、给其父级也加浮动，但当父级css：margin 0 auto时，父级div就不会居中了；

2、给父级加display:inline-block,同样父级css为margin:0 atuo时，也不会居中，但是IE6和IE7会居中；

3、在浮动元素下加<div class="clear"></div>,其中clear的css样式为：.clear{ height:0px;font-size:0;clear:both;}

4、在浮动元素下加<br clear="all"/>

5、给浮动元素的父级加.clear{zoom:1;} .clear:after{content:""; display:block;clear:both;}

6、给浮动元素的父级加overflow:auto

总结到第六条我发现我之前的代码就不用写那么麻烦，直接在.foot里写overflow:auto，就搞定了！

附上基本完工的静态网页，明后两天更新动态的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>湘潭大学艺术学院</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="header">
    <div>
        <div class="img1"><img src="img/logo.png"></div>
        <div class="daohang">
            <span>关于我们</span>
            <span>专业设置</span>
            <span>教学科研</span>
            <span>作品展示</span>
            <span>展览讲座</span>
            <span>招生就业</span>
        </div>
        <div class="find">
            <form>
                <input type="text" name="research" style="width: 160px;height: 20px"/>
                <input type="submit" value=""
                       style="background:url('img/find.png') no-repeat; width:27px; height:27px;">
            </form>
        </div>
    </div>

</div>
<img class="img2" src="img/img.png">

<div id="container">
    <hr>
    <div class="left">
        <div class="exhi">
            <h4>展览及讲座 EXHI&LECT</h4>

            <div>
                <img src="img/img2.png">
            </div>
            <h3>动画系第一次讲座--《动画文化随想》</h3>
            <h5>2015-12-22</h5>
            <hr style="height:1px;border:none;border-top:1px dashed grey;">
            <ul>
                <li>2015年12月17日   考研规划与指导讲座</li>
                <li>2015年12月17日   不弃不离的艺术之路--周小愚教授艺术讲座</li>
                <li>2015年11月22日   2015环太平洋艺术交流系列活动在湘潭大学举行</li>
                <li>2015年10月24日   曾强教授的励志讲座</li>
                <li>2015年10月17日   专业教育与考研启迪专题讲座</li>
            </ul>

        </div>
        <div class="dynamic">
            <h4>学院动态 DYNAMIC</h4>

        </div>


    </div>
    <div class="right_mid">
        <div class="mid">
            <h4>招生就业</h4>
            <h4>ENROLLMENT&EMPLOYMENT</h4>

            <p>
                德邦物流股份有限公司本科生招聘<br>
                2015年10月05日<br>
                德邦物流股份有限公司本科生招聘简章<br>
                宣讲时间：2012年4月16
            </p>
            <hr style="height:1px;border:none;border-top:1px dashed grey;">
            <p>
                中铁城建集团有限公司招聘信息<br>
                2015年10月05日<br>
                招聘摄影摄像艺术专业学生1名，专业动手能力强，形象好，作品获奖或有一定经验
            </p>
            <hr style="height:1px;border:none;border-top:1px dashed grey;">
            <p>
                艺术学院研究生导师队伍——宋扬<br>
                2015年10月03日<br>
                艺术学院研究生导师队伍——宋扬 副教授，湖南湘潭人，湘潭大
            </p>
            <hr style="height:1px;border:none;border-top:1px dashed grey;">
            <p>
                2015年09月28日 艺术学院2016年推<br>
                2015年09月28日 艺术学院2016年推<br>
                2015年07月24日 艺术学院研究生研究生
            </p>


        </div>

        <div class="right">
            <h4>通知公告</h4>
            <h4>ANNOUNCEMENT</h4>

            <p>
                第八届中国大学生DV文化艺术节作<br>
                2016年03月10日<br>
                由湘潭大学主办，中国政法大学以及北京服装学院协办的第八届中国大学生

            </p>
            <hr style="height:1px;border:none;border-top:1px dashed grey;">
            <p>
                2015年艺术学院教师系列副高级<br>
                2015年10月05日<br>
                经学院职称评审推荐小组集体讨论，一致同意以下排序结果,同意予以公示三天。

            </p>
            <hr style="height:1px;border:none;border-top:1px dashed grey;">
            <p>
                艺术学院2016年推免攻读硕士学<br>
                2015年10月05日<br>
                复试时间：2015年10月9日上午8:00点； 复试地点：艺术学院会议室
            </p>
            <hr style="height:1px;border:none;border-top:1px dashed grey;">
            <p>
                2015年10月05日 艺术学院2015届毕业<br>
                2015年10月05日 关于湘大艺术学院<br>
                2015年10月05日 关于举办湘潭大学首届
            </p>

        </div>
        <div class="display">
            <h4>作品展示 DISPLAY</h4>
            <hr>


        </div>
    </div>



</div>


<div id="footer">
    <div class="foot">
        <div class="first">
            <a>链接 Links</a>

            <div>
                <ul>
                    <li>湘潭大学艺术学院OLO教学平台</li>
                    <li>湘潭大学教务管理系统</li>
                    <li>中国大学生在线</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>湘潭大学</li>
                    <li>湘潭大学图书馆</li>
                    <li>湖南省设计家协会</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>湘潭大学学生工作处</li>
                    <li>国家教育部</li>
                    <li>中国视觉联盟</li>
                </ul>
            </div>
        </div>

        <div class="second">
            <hr>
            <a>联系 Contact</a>
            <ul>
                <li>XTU-ART@163.com</li>
                <li>电话 +86 0730-65866245</li>
                <li>传真 +86 0731-58293856</li>
                <li>中国湖南省湘潭市雨湖区湘</li>
                <li>潭大学艺术学院</li>
            </ul>

        </div>

    </div>
</div>


</body>
</html>

和css代码：



#header{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.img1{
    margin-right:40px;
    margin-top: 30px;
    margin-left: 5px;
    float: left;


}
.img2{
    margin-left: 300px;
}

.daohang{
    margin-right: 40px;
    margin-top: 74px;
    float: left;
}
.daohang span{
    margin-right: 50px;
    font-family: 微软雅黑;
}

.find{
    float: left;
    margin-top: 30px;
    margin-left: -200px;
}


#container{
    width: 1200px;
    margin: 0 auto;
    height: 800px;
}
.left{
    width:600px;
    height: 100%;
    float: left;
}
.exhi{
    height: 70%;
    float: left;
    width: 560px;
}
.dynamic{
    height: 30%;
    float: left;
}
.exhi ul{
    list-style-type: none;
    margin-left: -40px;
}

.right_mid{
    width: 600px;
    height:100%;
    float: right;
}

.mid{
    width: 48%;
    height: 70%;
    float: left;
    margin-right: 24px;

}
.right{
    float: right;
    width: 48%;
    height: 70%;

}
.display{
    float: left;
    width: 600px;
    /*margin-top: 20px;*/
    /*height: 250px;*/
    height: 30%;

}


#footer{
    background-color: darkorange;

}
.foot{
    width: 1200px;
    margin: 0 auto;
    overflow: auto;

}
.foot ul{
    margin-left: 130px;
    list-style-type:none;
    float: left;
}
.second{
    clear: both;
}


.second a{
    margin-left: -350px;
}