Cssフローティングをクリアする方法のまとめ

4457 ワード
clearfix float css
Webレイアウトではfloatフローティングがよく使用されますが、フローティングされたブロックレベルの要素は標準ドキュメントフローから離れており、フローティング要素の親要素に高さがなく、親要素に高さがないため、フローティングが親要素に与える影響をクリアする必要があります.フローティングをクリアする方法について説明します.
フローティングの影響を除去する方法:
  • 親要素の高さ
    • を設定
    効果図:
    コード:
  • :空白のブロックレベル要素にcssスタイルclearを追加してフローティング
    • をクリアする.
    注意:clearスタイルを追加したブロックレベル要素はmargin外付け属性を追加できません
    効果図:
    コード:
    • ：使用一个空白块级元素上添加css样式clear清除浮动

    效果图：

    代码：

    相对于 有相对优点：

    设置后，浮动元素的父级元素会被撑开，也就是说有了高度

    • 给浮动元素的父元素添加 overflow:hidden

    原意：表示移除隐藏，溢出边框的内容都要隐藏掉

    效果图：

    代码：

    テキストリンク:https://www.mi360.cn/articles/94
    CSS:css resetを知る
    #if#elif#endifの使用------条件コンパイル(conditional compilation)