CSS ఫ్లోటింగ్
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS ఫ్లోటింగ్
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
అనేక బాక్స్ ను ఎడమకు జరిగించినప్పుడు, బాక్స్ 1 ఎడమకు ఫ్లోటింగ్ అవుతుంది వరకు ఎడమకు ఫ్లోటింగ్ అవుతుంది, ఇతర రెండు బాక్స్ లు ముందస్తు ఫ్లోటింగ్ బాక్స్ తో ఎడమకు ఫ్లోటింగ్ అవుతాయి.
ఇలా చిత్రం చూసినప్పుడు, అనుబంధ బాక్స్ అండర్ ఫ్లోటింగ్ మూడు ఫ్లోటింగ్ కంపోనెంట్స్ నిర్మించకపోతే, ఇతర ఫ్లోటింగ్ బుక్స్ క్రిందకు జరిగి స్థలం కలుగించినప్పటికీ నిలిచిపోతాయి. ఫ్లోటింగ్ కంపోనెంట్స్ అనేక పరిమాణాలు కలిగి ఉన్నట్లయితే, వాటి క్రిందకు జరిగినప్పుడు ఇతర ఫ్లోటింగ్ కంపోనెంట్స్ చేతిలో ఉండవచ్చు:
CSS float అట్రిబ్యూట్
CSS లో, మేము ఫ్లోట్ అంశం ద్వారా కూడా కంపోనెంట్స్ ఫ్లోట్ చేస్తాము.
ఫ్లోట్ అంశం గురించి మరింత తెలుసుకోవడానికి పరికల్పనా హాండ్బుక్ సందర్శించండి:CSS float అట్రిబ్యూట్。
వరుస బాక్స్ మరియు కలుసుకునే విధానం
ఫ్లోటింగ్ బాక్స్ పక్కన వరుస బాక్స్ కుదించబడుతుంది, అందువలన ఫ్లోటింగ్ బాక్స్ కు స్థలం కలుగబడుతుంది, వరుస బాక్స్ ఫ్లోటింగ్ బాక్స్ చుట్టూ పెరిగిపోతుంది.
అందువలన, ఫ్లోటింగ్ బాక్స్ సృష్టించడం చిత్రాలను చుట్టూ వచ్చే పాఠాన్ని అనుమతిస్తుంది:
దీనికి ప్రతిఘటించడానికి ఫ్లోటింగ్ బాక్స్ చుట్టూ ఫ్లోటింగ్ మాక్రో ప్రయోగించాలి clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：
这是一个有用的工具，它让周围的元素为浮动元素留出空间。
让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
ఈ పరిస్థితిలో, ఒక సమస్య పెరిగింది. ఫ్లోటింగ్ మూలకం డాక్యుమెంట్ స్ట్రీమ్ నుండి బయటపడినప్పుడు, చిత్రాలు మరియు పాఠం చుట్టూ చుట్టబడిన డివ్నులు స్థానాన్ని పాలుపంచుకోకపోతాయి.
ఎలా చుట్టూ పెరిగిన మూలకాన్ని దృష్టిలోకి పెట్టాలి? ఈ మూలకంలో కొంత స్థానంలో clear అనువర్తనాన్ని ఆపి చేయాలి:
అయితే, ఒక కొత్త సమస్య పెరిగింది. ప్రస్తుతం శుభ్రం చేయడానికి ఉపయోగించగల ఏ మూలకం లేకపోవడంతో, మాత్రమే ఒక ఖాళీ మూలకాన్ని చేర్చి శుభ్రం చేయవలసి ఉంటుంది.
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
ఇది మేము కోరుకున్న ఫలితాన్ని పొందించగలదు, కానీ అది అదనపు కోడ్ని చేర్చడానికి అవసరం. కొన్ని సరిహద్దులు ఫ్లోట్ అనువర్తనాన్ని వాడవచ్చు, కానీ కొన్ని సార్లు సరిహద్దులను సరిహద్దులు కోసం అనావశ్యకమైన ముద్రణను చేర్చడానికి అవసరం.
అయితే, మేము మరొక పద్ధతిని కూడా కలిగి ఉన్నాము, అది కంటైనర్ డివ్ని ఫ్లోట్ చేయడం అనేది:
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
ఇది మేము కోరుకున్న ఫలితాన్ని పొందించగలదు. అయితే, తదుపరి మూలకం ఈ ఫ్లోటింగ్ మూలకం పై ప్రభావం కలిగిస్తుంది. ఈ సమస్యను పరిష్కరించడానికి, కొంతమంది సరిహద్దులను ఫ్లోట్ చేసి, తరువాత ప్రామాణికమైన మూలకాలను ఉపయోగించి ఫ్లోటింగ్ ను శుభ్రం చేసే విధానాన్ని అనుసరిస్తారు. ఇది అనావశ్యకమైన ముద్రణను తగ్గించడానికి మరియు తొలగించడానికి సహాయపడుతుంది.
అయితే, CodeW3C.com స్టేషన్ ప్రతి పేజీ ఈ టెక్నాలజీని వాడుతుంది. మీరు మా CSS ఫైల్ని తెరిచినప్పుడు, మేము పాదపు డివ్ని శుభ్రం చేసినది చూడగలరు, మరియు పాదపు పైన మూడు div నుండి ఎడమకు సరితూచుకున్నాము.
CSS clear అట్రిబ్యూట్
మేము కేవలం చేసిన CSS శుభ్రత పని మరియు clear అట్రిబ్యూట్ యొక్క అనువర్తనాన్ని విస్తారంగా చర్చించాము. మీరు clear అట్రిబ్యూట్ గురించి మరింత తెలుసుకోవాలనుకుంటే, సూచనా మాన్యాలు సందర్శించండి:CSS clear అట్రిబ్యూట్。
浮动和清理 实例
- float 属性的简单应用
- 使图像浮动于一个段落的右侧。
- 将带有边框和边界的图像浮动于段落的右侧
- 使图像浮动于段落的右侧。向图像添加边框和边界。
- 带标题的图像浮动于右侧
- 使带有标题的图像浮动于右侧
- 使段落的首字母浮动于左侧
- 使段落的首字母浮动于左侧，并向这个字母添加样式。
- 创建水平菜单
- 使用具有一栏超链接的浮动来创建水平菜单。
- 创建无表格的首页
- 使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
- 清除元素的侧面
- 本例演示如何使用清除元素侧面的浮动元素。
