ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSの基礎知識:float_html/css_WEB-ITnose
以前、CSS の基礎知識の位置づけに関する記事を書きましたが、その当時の私の float の理解はあまり正確ではなく、MOOC.com で多くの読者から指摘を受けました(原文は修正しました)。 、誤解を招く内容でしたら申し訳ありません)。ここで、float についてさらに詳しく学び、私の学習経験を皆さんと共有したいと思います。
浮動要素は、その外側の境界が「包含ブロックの内側の境界」または「別の浮動要素の外側の境界」に触れるまで、左 (または右) にオフセットされます。
フローティング要素は標準のドキュメント フローの範囲外です。テキストおよび行レベルの要素は要素の周囲に回り込みますが、ブロック レベルの要素は影響を受けません。
非置換要素を浮動させる場合、要素の幅を宣言する必要があります。宣言しない場合、要素の幅は 0 になる傾向があります。
フローティング要素のマージン(余白)は、他の要素のマージンとマージされません。
.clear-float1{ content: “”; display: block; clear: both; }/* 方法1,当父包含块缩成一条时无效 */.clear-float2{ overflow:hidden; width:100%; }/* 方法2,overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容,从而实现了清除浮动。 */.clear-float3{ overflow: auto; zoom: 1; }/* 方法3,zoom是在处理兼容性问题,hidden和auto都能清除浮动,据说auto对seo更友好 */
皆さん、Shi Jiajie のブログに来て私とコミュニケーションを取り、貴重な提案をここに残してください。