html5和css篇有關浮動以及如何清除浮動

阿新 • • 發佈：2019-02-13

今天溫習了一下寫網頁的骨架和血肉，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>[email protected]</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>[email protected]</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;
}

html5和css篇有關浮動以及如何清除浮動

今天溫習了一下寫網頁的骨架和血肉，html5和css，因為要備戰找實習，之前看了一下各大公司筆試題，覺得雖然可以敲出來但是還是不夠熟悉，而且考試內容好基礎，好全面，所以每天還是記錄一下。其實大一上學期就開始接觸網頁的製作，但是到如今才對它有個深刻清晰的瞭解，所謂厚積薄發，

css佈局時什麼時候需要清除浮動以及清除浮動都有哪些方法？

1、在以下情況下需要清除：在對元素設定浮動時，元素就會脫離文件流，在css中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素，float主要流行與頁面佈局，使用之後沒有清除就會後患無窮。 2、常用到清除方法：第一種：使用空標籤取出浮動；

CSS學習——浮動（float）帶來的問題以及清除浮動

浮動（float）帶來的問題以及清除浮動在《CSS學習——初識浮動（float）》部落格中，我介紹了學習到的CSS的浮動。那麼我們使用浮動屬性會不會帶來什麼問題呢？下面就說說浮動（float）帶來的問題以及如何清除浮動。浮動帶來的問題有可能會影響到後面元素的佈局，可以元

01-CSS基礎--CSS概述+CSS和HTML相結合的四種方式+CSS選擇器+盒子模型+元素的浮動float+清除浮動clear+元素的定位position

一、CSS概述 1、CSS：層疊樣式表，用來定義網頁的顯示效果。CSS將網頁內容和顯示樣式進行分離，提高了顯示功能（降低耦合性，提高擴充套件性和可維護性） 2、CSS的基本特徵（1）層疊性：多種CSS樣式的疊加（2）繼承性：子標記會繼承父標記的某些樣式 3、CS

CSS篇之2. 清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法

2. 清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法？一.什麼時候需要清除浮動？我們對元素進行了浮動(float)時，我們的元素就會脫離文件流，像一隻小船一樣漂流在文件之上。在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而

html5和css基礎設計之實驗四

html5和css選擇器項目一總結：1、錨點鏈接為先設置<a href="#one"></a>再設置跳轉目標<h id="ones"></h>;2、可以先設置display:none再設置:target{display:block;}實現跳轉顯示；3、關於tex

css-浮動與清除浮動的原理詳解（清除浮動的原理你知道嗎）

alt col ges mage all strong splay height http float元素A的特點：脫離文檔流靠向left或right float元素會和塊盒子重疊準確來說，是塊盒子和A重疊，但塊盒子內容會浮動在A周圍不會和inline元素重

CSS響應式佈局之清除浮動

在很多前端工程師日常工作中，在使用到float佈局時，總會有一點需要去考慮的，那就是清除浮動問題。那這個問題怎麼會發生的呢？當float子元素高度超出父級元素高度時，父級元素高度塌縮，因為float元素脫離文件流，其佈局不受父元素控制這個情況如下圖所示高度塌

脫離文件流的三種方式以及清除浮動

固定定位(position:fixed) 脫離文件流後的元素有四個特性： 1.不再區分行和快； 2.如果本元素未設定寬度，脫離後的寬度將由其子元素撐開，高度也是； 3.字圍效果； 4.貼靠現象；清除浮動： 1.給浮動元素的父元素設定寬高，這樣就不會影響到後面的元素了（不建議用，不使用）； 2.給浮動元素新

請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式？

為什麼出現浮動？浮動float最開始出現的意義是為了讓文字環繞圖片而已，但人們發現，如果想要三個塊級元素並排顯示，都給它們加個float來得會比較方便。什麼時候清除浮動？如果想要實現三個塊級元素並排顯示，期望效果如下圖所示：給三個塊級元素

前端給js和css加上時間戳，清除快取，做版本控制

1.<script type="text/javascript" src="../resources/js/pcWeb/index.js"> 2.<script type="text/javascript" src="../resources/js/pcWeb/index.js?15470

CSS清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法

<div class="wrap" id="float1"> <h2>1）新增額外標籤</h2> <div class="main left">.main{float:left;}</div> <div class="side le

Java開發入門必學：html5和CSS

Java開發已經悄無聲息的走進我們的生活中，無論是手機軟體、手機Java遊戲還是電腦軟體等，只要你使用到電子產品就會碰到和Java有關的東西，更多的企業正採用Java語言開發網站，也吸引了好多志同道合的朋友開始加入Java開發的行列。我們知道在Java的學習中，Java

關於浮動與清除浮動

上推 lock zoom 瀏覽器需要清除睡覺註意自動 time: 2016-02-23 21:00 tags: css 在css布局中常用的一個屬性就是float，它可以讓div塊脫離原本的文檔流向左或向右浮動，但是...這個浮動有時候很煩，需要清除浮動，

為什麼要浮動，什麼時候需要清除浮動，清除浮動都有哪些方法

(1)為什麼需要浮動據網上資料顯示，以前提出浮動的概念主要是為了解決左邊圖片，右邊文字的需求，後來浮動在網頁的佈局中應用比較廣泛。我之前在學習網頁設計時，針對於一個花店的導航頁，存在許多的圖片顯示，而有效並且美觀的佈局樣式極為重要，這時float屬性就顯得尤為重要。 (2)什麼時候

清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法

什麼時候要清除浮動其實浮動float最開始出現的意義只是為了讓文字環繞圖片而已。但人們發現，如果想要三個塊級元素並排顯示，都給它們加個float來得會比較方便。但這樣做也會帶來問題...... 我們希望看到這樣的效果：希望看到的效果但結果卻是這樣：實際的效果這個時候，我們就要清除浮動帶來的影響

理解為何需要清除浮動及清除浮動的方法

初衷：寫這篇文章是博主之前參加百度面試，被問到清楚浮動的方法，答了幾種方法當提到overflow：hidden之後被追問什麼是bfc，隨即啞火。感嘆自己對知識的深度著實不夠。所以打算寫一篇文章作為

清除過浮動方法清除浮動大全

浮動(float)，一個我們即愛又恨的屬性。愛，因為通過浮動，我們能很方便地佈局；恨，浮動之後遺留下來太多的問題需要解決，特別是IE6-7（以下無特殊說明均指 windows 平臺的 IE瀏覽器）。也許很多人都有這樣的疑問，浮動從何而來？我們為何要清除浮動？清除浮動的原理

CSS3浮動與清除浮動

浮動的設計初衷：實現文字環繞效果。浮動的特徵：脫離標準文件流，導致父元素高度塌陷，向左或者向右浮動直到遇到其他的浮動元素。浮動產生的原因：盒子裡的子元素使用了浮動屬性，脫離了文件流，導致父元素無法被撐開。浮動造成的副作用：父級的背景無法顯示，父級的邊

關於浮動與清除浮動 (附清除浮動的八種方式)

在css2裡，浮動（float）這個屬性是個經典又詭異的一個屬性，歷來對它的爭議就不斷。　　從語義上講：　　float這個屬性顧名思義，既然叫浮動，咱們不妨把它與船體在水中的浮動聯絡起來。即可以這樣假設，document為一個水箱，document的文件流就是水箱裡的一

html5和css篇有關浮動以及如何清除浮動

相關推薦